`, ``, and ``.
-$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;
@@ -100,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.
@@ -137,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
@@ -186,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
@@ -219,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%);
diff --git a/app/assets/sass/application.scss b/app/assets/sass/application.scss
index f44df01..134a1f5 100644
--- a/app/assets/sass/application.scss
+++ b/app/assets/sass/application.scss
@@ -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";
diff --git a/app/assets/sass/base/_global.scss b/app/assets/sass/base/_global.scss
index a507247..aa9f68b 100644
--- a/app/assets/sass/base/_global.scss
+++ b/app/assets/sass/base/_global.scss
@@ -1,5 +1,6 @@
-html {
- position: relative;
- min-height: 100%;
+body {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
}
diff --git a/app/assets/sass/base/_typography.scss b/app/assets/sass/base/_typography.scss
index 93ac4c4..37e0e67 100644
--- a/app/assets/sass/base/_typography.scss
+++ b/app/assets/sass/base/_typography.scss
@@ -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;
+}
diff --git a/app/assets/sass/base/_utils.scss b/app/assets/sass/base/_utils.scss
new file mode 100644
index 0000000..0fe5777
--- /dev/null
+++ b/app/assets/sass/base/_utils.scss
@@ -0,0 +1,8 @@
+
+.center-block {
+ @include center-block();
+}
+
+.clearfix {
+ @include clearfix();
+}
diff --git a/app/assets/sass/components/_badge.scss b/app/assets/sass/components/_badge.scss
index 46107e7..254e560 100644
--- a/app/assets/sass/components/_badge.scss
+++ b/app/assets/sass/components/_badge.scss
@@ -13,6 +13,6 @@
&-primary {
color: white;
- background-color: $brand-color;
+ background-color: $primary;
}
}
diff --git a/app/assets/sass/components/_callback-list.scss b/app/assets/sass/components/_callback-list.scss
index c2a4b5b..da81b8a 100644
--- a/app/assets/sass/components/_callback-list.scss
+++ b/app/assets/sass/components/_callback-list.scss
@@ -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%);
+ }
+ }
+ }
}
diff --git a/app/assets/sass/components/_pagination.scss b/app/assets/sass/components/_pagination.scss
index 13c63bc..78fa41b 100644
--- a/app/assets/sass/components/_pagination.scss
+++ b/app/assets/sass/components/_pagination.scss
@@ -1,6 +1,6 @@
.pagination {
- @extend .nav;
+ @extend .center-block;
margin-top: 1em;
margin-bottom: 1em;
diff --git a/app/assets/sass/layout/_navigation.scss b/app/assets/sass/layout/_navigation.scss
index 213f8d3..d26f20d 100644
--- a/app/assets/sass/layout/_navigation.scss
+++ b/app/assets/sass/layout/_navigation.scss
@@ -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: calc($navbar-link-spacing / 2);
- margin-right: calc($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;
}
diff --git a/app/assets/sass/layout/_sections.scss b/app/assets/sass/layout/_sections.scss
index b53a4cf..a9e6b83 100644
--- a/app/assets/sass/layout/_sections.scss
+++ b/app/assets/sass/layout/_sections.scss
@@ -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;
diff --git a/app/assets/sass/mixins/_center-block.scss b/app/assets/sass/mixins/_center-block.scss
new file mode 100644
index 0000000..0a0dcb1
--- /dev/null
+++ b/app/assets/sass/mixins/_center-block.scss
@@ -0,0 +1,6 @@
+
+@mixin center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/app/assets/sass/views/_about.scss b/app/assets/sass/views/_about.scss
index 62579ca..9c41d5f 100644
--- a/app/assets/sass/views/_about.scss
+++ b/app/assets/sass/views/_about.scss
@@ -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);
+ }
}
}
-
diff --git a/app/assets/sass/views/_landingpage.scss b/app/assets/sass/views/_landingpage.scss
index ebab10b..bc3d8e6 100644
--- a/app/assets/sass/views/_landingpage.scss
+++ b/app/assets/sass/views/_landingpage.scss
@@ -12,6 +12,7 @@
.steps {
display: flex;
+ justify-content: center;
column-gap: 2rem;
.steps-img {
diff --git a/app/forms/UserSettings.php b/app/forms/UserSettings.php
index 1142081..3e6387e 100644
--- a/app/forms/UserSettings.php
+++ b/app/forms/UserSettings.php
@@ -43,9 +43,11 @@ class UserSettings extends FormBase
$id = new Text('id', array(
'class' => 'form-control',
'readonly' => '',
+ 'disabled' => 'disabled',
));
$id->addValidator(new IdenticalValidator([
'accepted' => $this->getEntity()->getId(),
+ 'allowEmpty' => true
]));
$id->setLabel('ID');
@@ -91,10 +93,12 @@ class UserSettings extends FormBase
'class' => 'form-control',
'placeholder' => 'Email',
'readonly' => '',
+ 'disabled' => 'disabled',
));
$email->addValidator(new IdenticalValidator([
'accepted' => $this->getEntity()->getEmail(),
+ 'allowEmpty' => true
]));
$email->setLabel('Email');
diff --git a/app/library/Form.php b/app/library/Form.php
index 7efbc32..89fe06e 100644
--- a/app/library/Form.php
+++ b/app/library/Form.php
@@ -10,7 +10,7 @@ class Form extends FormBase
public function renderDecorated($name, $opt = [])
{
$options = [
- 'label-class' => 'control-label',
+ 'label-class' => 'col-form-label text-end',
'class' => [ 'col-sm-10' ],
'message' => ''
];
diff --git a/app/views/_common/_components/flash.volt b/app/views/_common/_components/flash.volt
index dec209a..8234515 100644
--- a/app/views/_common/_components/flash.volt
+++ b/app/views/_common/_components/flash.volt
@@ -10,12 +10,9 @@
{% for type, messages in flash.getMessages() %}
{% for message in messages %}
-
-
- {{ type|capitalize }}
-
- {{ message }}
-
+ {{ type|capitalize }}
+ {{ message }}
+
{% endfor%}
{% endfor %}
diff --git a/app/views/_common/_components/navigation.volt b/app/views/_common/_components/navigation.volt
index 7f05d1c..eaf3fd7 100644
--- a/app/views/_common/_components/navigation.volt
+++ b/app/views/_common/_components/navigation.volt
@@ -9,15 +9,15 @@
{% if auth.hasIdentity() %}
diff --git a/app/views/main/callback/list.volt b/app/views/main/callback/list.volt
index 5f4d100..f5920a3 100644
--- a/app/views/main/callback/list.volt
+++ b/app/views/main/callback/list.volt
@@ -2,9 +2,9 @@
- Callbacks
+ Callbacks
-
+
{{ icon('solid/plus') }} New
diff --git a/app/views/main/callback/new.volt b/app/views/main/callback/new.volt
index 584e229..7b7ccc8 100644
--- a/app/views/main/callback/new.volt
+++ b/app/views/main/callback/new.volt
@@ -3,37 +3,17 @@
Create callback
-
-
-