pnx/httpcb
Archived
1
0
Fork 0
Code Releases Activity

Merge branch 'dev' into 31-admin-user-management

Browse source 
# Conflicts:
#	app/forms/UserSettings.php
This commit is contained in:
Henrik Hautakoski 2022-08-08 23:35:37 +02:00
commit 4b750f0f37
70 changed files with 7831 additions and 5620 deletions
Download patch file Download diff file Expand all files Collapse all files

65
app/assets/sass/_bootstrap-config.scss Normal file
View file

@ -0,0 +1,65 @@
// ----------------------------------
// Components
// ----------------------------------
$enable-shadows: true;
$enable-reduced-motion: false;
// ----------------------------------
// Colors
// ----------------------------------
$body-bg: #f5f5f8;
$gray-100: #f1f3f5;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$primary: #03a9f4;
$blue: #2680d9;
$green: #5cb85c;
$yellow: #f0ad4e;
$red: #d9534f;
// ----------------------------------
// Typography
// ----------------------------------
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-root: 15px;
$navbar-brand-font-size: 1.4rem;
// ----------------------------------
// Links
// ----------------------------------
$link-decoration: none;
// ----------------------------------
// Tables
// ----------------------------------
$table-cell-padding-y: .3rem;
$table-cell-padding-x: .3rem;
$table-cell-padding-y-sm: .23rem;
$table-cell-padding-x-sm: .23rem;
$table-striped-bg: $gray-100;
$table-hover-bg: $gray-200;
// ----------------------------------
// Form
// ----------------------------------
$input-bg: white;
$form-label-font-weight: bold;

32
app/assets/sass/_bootstrap-custom.scss
View file

@ -1,32 +0,0 @@
// ---------------------------
// Custom bootstrap variables.
// ---------------------------
$body-bg: #f5f5f8;
$font-size-base: 15px;
$nav-link-hover-bg: none;
// ---------------------------
// Source imports
// ---------------------------
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/normalize";
@import "bootstrap/close";
@import "bootstrap/alerts";
@import "bootstrap/print";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/scaffolding";
@import "bootstrap/grid";
@import "bootstrap/utilities";
@import "bootstrap/navs";
@import "bootstrap/dropdowns";
@import "bootstrap/modals";
@import "bootstrap/component-animations";

1
app/assets/sass/_mixins.scss
View file

@ -1,3 +1,4 @@
@import "mixins/button";
@import "mixins/center-block";
@import "mixins/icon-vcenter";

56
app/assets/sass/_variables.scss
View file

@ -8,12 +8,12 @@ $image-path: #{$base-path}/img;
// ----------------------------------
// Colors
// ----------------------------------
$gray-lightest: #f9f9f9;
$gray-light: #dcdcdc;
$gray-dark: #444;
$gray-darker: #202020;
$black: #000;
$white: #fff;
// TODO: Remove
$gray-lightest: $gray-100;
$gray-light: $gray-300;
$gray-dark: $gray-700;
$gray-darker: $gray-900;
// Text
$text-color: #333;
@ -25,37 +25,26 @@ $foreground-color: $white;
$hover-color: $gray-lightest;
$border-color: $gray-light;
// Brand
$brand-color: #03a9f4;
$brand-info: hsl(210, 70%, 50%);
$google-color: #db4437;
$github-color: #4183c4;
$gitlab-color: #548;
$linkedin-color: #0077B5;
// ----------------------------------
// Font
// Typography
// ----------------------------------
$font-size-navigation: 20px;
$text-size-large: 20px;
$font-size-navigation: $navbar-brand-font-size;
$font-size-large: 20px;
$font-size-small: 14px;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
// ----------------------------------
// Layout
// ----------------------------------
$header-text-shadow: 1px 3px 4px rgba(0, 0, 0, 0.45);
// navigation
$navbar-breakpoint-min: $screen-md-min;
$navbar-height: 60px;
$navbar-link-vertical-spacing: 8px;
$navbar-link-underline-height: 2px;
@ -70,8 +59,10 @@ $navbar-link-hover-underline: $navbar-link-color;
$navbar-link-active-color: $navbar-link-color;
$navbar-link-active-underline: $navbar-link-color;
$navbar-brand-color: $brand-color;
$navbar-brand-hover-color: darken($brand-color, 15%);
$navbar-brand-color: $primary;
$navbar-brand-hover-color: darken($primary, 15%);
$nav-link-hover-bg: none;
// User menu
$usermenu-button-bg: $navbar-background;
@ -79,6 +70,7 @@ $usermenu-button-hover-bg: darken($usermenu-button-bg, 8%);
// Footer
$footer-height: 80px;
$footer-spacing: 1rem;
$footer-border-color: $border-color;
$footer-text-color: $text-secondary-color;
$footer-link-color: $footer-text-color;
@ -99,17 +91,17 @@ $button-primary-color: white;
$button-primary-bg: #5fbc49;
$button-brand-color: white;
$button-brand-bg: $brand-color;
$button-brand-bg: $primary;
// State
$button-info-color: white;
$button-info-bg: $brand-info;
$button-info-bg: $info;
$button-success-color: white;
$button-success-bg: $brand-success;
$button-success-bg: $success;
$button-warning-color: white;
$button-warning-bg: $brand-warning;
$button-warning-bg: $warning;
$button-danger-color: white;
$button-danger-bg: $brand-danger;
$button-danger-bg: $danger;
// Company.
@ -136,7 +128,7 @@ $list-group-item-background: transparent;
$list-group-item-border-color: $gray-light;
$list-group-hover-background: $gray-lightest;
$list-group-item-active-background: $brand-color;
$list-group-item-active-background: $primary;
// ----------------------------------
// List group
@ -185,8 +177,8 @@ $pagination-border: $border-color;
$pagination-hover: $hover-color;
$pagination-active-color: $white;
$pagination-active-bg: $brand-color;
$pagination-active-border: darken($brand-color, 5%);
$pagination-active-bg: $primary;
$pagination-active-border: darken($primary, 5%);
// ----------------------------------
// Section
@ -218,4 +210,4 @@ $callback-list-arrow-color: $callback-list-border-color;
// ----------------------------------
$request-item-secondary-color: $text-secondary-color;
$request-detail-background: lighten($brand-color, 45%);
$request-detail-background: lighten($primary, 45%);

43
app/assets/sass/application.scss
View file

@ -1,23 +1,54 @@
// ---------------------------
// Bootstrap & Fonts
// ---------------------------
@import "bootstrap-custom";
// Fonts
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i');
@import "bootstrap/scss/functions";
// ---------------------------
// Bootstrap config
// ---------------------------
@import "bootstrap-config";
// ---------------------------
// Bootstrap
// ---------------------------
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
// Optional
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/close";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/type";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/images";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/utilities/api";
// ---------------------------
// Site
// ---------------------------
// variables & mixins.
@import "variables";
@import "mixins";
// Base
@import "base/global";
@import "base/typography";
@import "base/utils";
// Layout
@import "layout/sections";

7
app/assets/sass/base/_global.scss
View file

@ -1,5 +1,6 @@
html {
position: relative;
min-height: 100%;
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

11
app/assets/sass/base/_typography.scss
View file

@ -12,3 +12,14 @@
.text-gitlab { color: $gitlab-color; }
.text-google { color: $google-color; }
.text-linkedin { color: $linkedin-color; }
a:hover {
text-decoration: underline;
}
.code {
background: $gray-100;
border: solid $gray-300 1px;
border-radius: $border-radius;
padding: .6em;
}

8
app/assets/sass/base/_utils.scss Normal file
View file

@ -0,0 +1,8 @@
.center-block {
@include center-block();
}
.clearfix {
@include clearfix();
}

2
app/assets/sass/components/_badge.scss
View file

@ -21,7 +21,7 @@
&-primary {
color: white;
background-color: $brand-color;
background-color: $primary;
}
&-info {

2
app/assets/sass/components/_button.scss
View file

@ -64,7 +64,7 @@
// Sizes
// ----------------------------------
.button-large { font-size: $text-size-large; }
.button-large { font-size: $font-size-large; }
.button-small { font-size: 0.6em; }
// Block button

125
app/assets/sass/components/_callback-list.scss
View file

@ -1,78 +1,81 @@
.callback-list {
margin-top: 1em;
.callback-list-item {
@extend .clearfix;
position: relative;
padding: .6em 1em;
&-item {
@include clearfix();
position: relative;
padding: .6em 1em;
&:hover {
background: $gray-lightest;
}
&:hover {
background: $gray-lightest;
}
// Borders.
// --------
// Borders.
// --------
border: solid $callback-list-border-color $callback-list-border-size;
border: solid $callback-list-border-color $callback-list-border-size;
// Remove top border for all except first child.
&:not(:first-child) {
border-top: 0;
}
// Remove top border for all except first child.
&:not(:first-child) {
border-top: 0;
}
// top border radius for first child.
&:first-child {
border-top-left-radius: $callback-list-border-radius;
border-top-right-radius: $callback-list-border-radius;
}
// top border radius for first child.
&:first-child {
border-top-left-radius: $callback-list-border-radius;
border-top-right-radius: $callback-list-border-radius;
}
// bottom border radius for first child.
&:last-child {
border-bottom-left-radius: $callback-list-border-radius;
border-bottom-right-radius: $callback-list-border-radius;
}
// bottom border radius for first child.
&:last-child {
border-bottom-left-radius: $callback-list-border-radius;
border-bottom-right-radius: $callback-list-border-radius;
}
// Sections.
// ---------
// Sections.
// ---------
&-header {
margin-bottom: .4em;
}
&-header {
margin-bottom: .4em;
}
&-info {
font-size: $font-size-small;
color: $callback-list-info-color;
&-info {
font-size: $font-size-small;
color: $callback-list-info-color;
> span {
display: inline-block;
margin-right: 1.6em;
}
> span {
display: inline-block;
margin-right: 1.6em;
}
.icon {
@include icon-vcenter();
font-size: 20px;
padding: .2em;
}
}
.icon {
@include icon-vcenter();
font-size: 20px;
padding: .2em;
}
}
&-name {
margin-right: 1em;
font-size: $callback-list-name-text-size;
color: $callback-list-name-color;
&-name {
margin-right: 1em;
font-size: $callback-list-name-text-size;
color: $callback-list-name-color;
&:hover {
color: $callback-list-name-hover-color;
text-decoration: none;
}
}
&:hover {
color: $callback-list-name-hover-color;
text-decoration: none;
}
}
&-arrow {
color: $callback-list-arrow-color;
position: absolute;
right: .8em;
top: 50%;
> .icon {
font-size: 35px;
transform: translateY(-50%);
}
}
&-arrow {
color: $callback-list-arrow-color;
position: absolute;
right: .8em;
top: 50%;
> .icon {
font-size: 35px;
transform: translateY(-50%);
}
}
}
}

2
app/assets/sass/components/_pagination.scss
View file

@ -1,6 +1,6 @@
.pagination {
@extend .nav;
@extend .center-block;
margin-top: 1em;
margin-bottom: 1em;

20
app/assets/sass/layout/_footer.scss
View file

@ -3,6 +3,7 @@
@extend .container;
display: flex;
align-items: center;
column-gap: $footer-spacing;
min-height: $footer-height;
a {
@ -14,22 +15,23 @@
}
}
&-left,
&-right {
@include make-xs-column(5);
}
&-middle {
@include make-xs-column(2);
&-left {
margin-left: $footer-spacing;
}
&-right {
display: flex;
justify-content: right;
margin-right: $footer-spacing;
}
&-left,
&-right {
text-align: right;
flex: 1;
}
// Top button
&-button-top {
@extend .center-block;
@extend .button;
@extend .button-round;
@include button-variant($footer-link-color, white, white);

30
app/assets/sass/layout/_navigation.scss
View file

@ -6,7 +6,7 @@
.navigation {
// General styling (for all viewport widths)
@extend .clearfix;
@include clearfix();
@extend .container;
min-height: $navbar-height;
@ -34,9 +34,9 @@
font-size: 24px;
// Hide for larger view-ports.
@media (min-width: $navbar-breakpoint-min) {
display: none !important;
}
@include media-breakpoint-up(md) {
@include visually-hidden;
}
}
// Menu
@ -47,18 +47,13 @@
> li {
// Inline list for larger viewports.
@media (min-width: $navbar-breakpoint-min) {
@include media-breakpoint-up(md) {
display: inline-block;
a {
display: block;
@include navbar-vertical-align($line-height-computed + ($navbar-link-vertical-spacing * 2));
margin: 4px calc($navbar-link-spacing / 2);
padding: $navbar-link-vertical-spacing 10px $navbar-link-vertical-spacing;
line-height: $line-height-computed;
margin-left: ($navbar-link-spacing / 2);
margin-right: ($navbar-link-spacing / 2);
&:hover {
color: $navbar-link-hover-color;
@ -76,7 +71,7 @@
}
// Only for small viewports.
@media (max-width: $navbar-breakpoint-min) {
@include media-breakpoint-down(md) {
margin: 1em 0;
@ -99,7 +94,8 @@
}
// Always show menu for larger viewport.
@media (min-width: $navbar-breakpoint-min) {
@include media-breakpoint-up(md) {
&-menu.collapse {
display: block;
}
@ -108,7 +104,7 @@
// User Menu
// -------------------
&-user-menu {
@extend .nav, .pull-right;
@extend .nav, .float-end;
margin-top: 10px;
&-login {
@ -123,7 +119,7 @@
display: inline-block;
padding: .3em .8em;
background: $usermenu-button-bg;
border-radius: $border-radius-base;
border-radius: $border-radius;
&:hover {
background: $usermenu-button-hover-bg;
@ -131,11 +127,11 @@
}
&-list {
@extend .dropdown-menu;
@extend .dropdown-menu-right;
@extend .dropdown-menu-end;
vertical-align: middle;
> li > a {
@extend .dropdown-item;
display: flex;
align-items: center;
}

6
app/assets/sass/layout/_sections.scss
View file

@ -6,7 +6,7 @@
.head-section {
background-color: $brand-color;
background-color: $primary;
background-image: url(#{$image-path}/header-pattern.jpg);
margin-bottom: 60px;
@ -23,7 +23,7 @@
.content-section {
@extend .container;
margin-bottom: $footer-height;
flex: 1 0 auto;
}
@ -33,8 +33,6 @@
.footer-section {
position: absolute;
bottom: 0;
width: 100%;
color: $footer-text-color;
border-top: 1px solid #bcbcbc;

6
app/assets/sass/mixins/_center-block.scss Normal file
View file

@ -0,0 +1,6 @@
@mixin center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}

11
app/assets/sass/views/_about.scss
View file

@ -3,11 +3,16 @@
@extend .row;
&-main {
@include make-sm-column(8);
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(8);
}
}
&-reference {
@include make-sm-column(4);
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(4);
}
}
}

9
app/assets/sass/views/_landingpage.scss
View file

@ -11,10 +11,11 @@
}
.steps {
@extend .row;
display: flex;
justify-content: center;
column-gap: 2rem;
.steps-img {
@extend .center-block;
width: 270px;
height: 220px;
}
@ -32,7 +33,9 @@
.steps-step1,
.steps-step2,
.steps-step3 {
@include make-md-column(4);
display: flex;
flex-flow: column;
align-items: center;
@extend .text-center;
}
}