From 8a70ea1131b77fd7ab8afd31503acdf6075e7127 Mon Sep 17 00:00:00 2001 From: Oliver Falk Date: Tue, 16 Sep 2025 11:22:10 +0200 Subject: [PATCH] Improve mobile layout for photo assignment pages - Replace float layout with responsive CSS Grid for photo selection - Add proper spacing between image boxes on mobile devices - Fix button overflow issues with responsive flexbox layout - Consolidate duplicate CSS into main stylesheet - Apply improvements to both email and OpenID assignment templates --- .../templates/assign_photo_email.html | 64 +- .../templates/assign_photo_openid.html | 65 +- ivatar/static/css/libravatar_base.css | 759 +++++++++++------- 3 files changed, 517 insertions(+), 371 deletions(-) diff --git a/ivatar/ivataraccount/templates/assign_photo_email.html b/ivatar/ivataraccount/templates/assign_photo_email.html index 3f1163c..a120aac 100644 --- a/ivatar/ivataraccount/templates/assign_photo_email.html +++ b/ivatar/ivataraccount/templates/assign_photo_email.html @@ -4,27 +4,16 @@ {% block title %}{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}{% endblock title %} {% block content %} -

{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}

{% if user.photo_set.count %}

{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}

-
+
{% for photo in user.photo_set.all %} -
{% csrf_token %} + {% csrf_token %}
{% endfor %} +
{% endif %} -
-
{% csrf_token %} +
+ {% csrf_token %} {% if email.bluesky_handle %} -
-
+ +

{% trans "Bluesky" %}

@@ -70,26 +60,22 @@ outline: inherit; {% endif %}
-
-
- {% blocktrans %}Upload a new one{% endblocktrans %}   - {% blocktrans %}Import from other services{% endblocktrans %} -
- -
- {% csrf_token %} -
- - {% if email.bluesky_handle %} - - {% else %} - - {% endif %} -
- - -
+
+ {% blocktrans %}Upload a new one{% endblocktrans %} + {% blocktrans %}Import from other services{% endblocktrans %}
-
+
+
{% csrf_token %} +
+ + {% if email.bluesky_handle %} + + {% else %} + + {% endif %} +
+ +
+
{% endblock content %} diff --git a/ivatar/ivataraccount/templates/assign_photo_openid.html b/ivatar/ivataraccount/templates/assign_photo_openid.html index 816da8e..4db9d5e 100644 --- a/ivatar/ivataraccount/templates/assign_photo_openid.html +++ b/ivatar/ivataraccount/templates/assign_photo_openid.html @@ -4,27 +4,16 @@ {% block title %}{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}{% endblock title %} {% block content %} -

{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}

{% if user.photo_set.count %}

{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this openid address:' %}

-
+
{% for photo in user.photo_set.all %} -
{% csrf_token %} + {% csrf_token %}
{% endfor %} - +
{% endif %} -
-
{% csrf_token %} +
+ {% csrf_token %} {% if openid.bluesky_handle %} -
-
+ +

{% trans "Bluesky" %}

@@ -71,26 +60,22 @@ outline: inherit; {% endif %}
-
-
- {% blocktrans %}upload a new one{% endblocktrans %} - {% blocktrans %}Import from other services{% endblocktrans %} -
- -
- {% csrf_token %} -
- - {% if openid.bluesky_handle %} - - {% else %} - - {% endif %} -
- - -
+
+ {% blocktrans %}upload a new one{% endblocktrans %} + {% blocktrans %}Import from other services{% endblocktrans %}
-
+
+
{% csrf_token %} +
+ + {% if openid.bluesky_handle %} + + {% else %} + + {% endif %} +
+ +
+
{% endblock content %} diff --git a/ivatar/static/css/libravatar_base.css b/ivatar/static/css/libravatar_base.css index 7b4cf17..acdebfe 100644 --- a/ivatar/static/css/libravatar_base.css +++ b/ivatar/static/css/libravatar_base.css @@ -1,72 +1,85 @@ /* lato-300 - latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 300; - src: url('../fonts/lato-v15-latin-300.eot'); /* IE9 Compat Modes */ - src: local('Lato Light'), local('Lato-Light'), - url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/LatoLatin-Light.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */ - url('../fonts/LatoLatin-Light.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/LatoLatin-Light.svg#Lato') format('svg'); /* Legacy iOS */ + src: url("../fonts/lato-v15-latin-300.eot"); /* IE9 Compat Modes */ + src: local("Lato Light"), local("Lato-Light"), + url("../fonts/LatoLatin-Light.eot?#iefix") format("embedded-opentype"), + /* IE6-IE8 */ url("../fonts/LatoLatin-Light.woff2") format("woff2"), + /* Super Modern Browsers */ url("../fonts/LatoLatin-Light.woff") + format("woff"), + /* Modern Browsers */ url("../fonts/LatoLatin-Light.ttf") format("truetype"), + /* Safari, Android, iOS */ url("../fonts/LatoLatin-Light.svg#Lato") + format("svg"); /* Legacy iOS */ } /* lato-regular - latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 400; - src: url('../fonts/lato-v15-latin-regular.eot'); /* IE9 Compat Modes */ - src: local('Lato Regular'), local('Lato-Regular'), - url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/LatoLatin-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/LatoLatin-Regular.svg#Lato') format('svg'); /* Legacy iOS */ + src: url("../fonts/lato-v15-latin-regular.eot"); /* IE9 Compat Modes */ + src: local("Lato Regular"), local("Lato-Regular"), + url("../fonts/LatoLatin-Regular.eot?#iefix") format("embedded-opentype"), + /* IE6-IE8 */ url("../fonts/LatoLatin-Regular.woff2") format("woff2"), + /* Super Modern Browsers */ url("../fonts/LatoLatin-Regular.woff") + format("woff"), + /* Modern Browsers */ url("../fonts/LatoLatin-Regular.ttf") + format("truetype"), + /* Safari, Android, iOS */ url("../fonts/LatoLatin-Regular.svg#Lato") + format("svg"); /* Legacy iOS */ } /* lato-700 - latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 700; - src: url('../fonts/lato-v15-latin-700.eot'); /* IE9 Compat Modes */ - src: local('Lato Bold'), local('Lato-Bold'), - url('../fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/LatoLatin-Bold.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */ - url('../fonts/LatoLatin-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/LatoLatin-Bold.svg#Lato') format('svg'); /* Legacy iOS */ + src: url("../fonts/lato-v15-latin-700.eot"); /* IE9 Compat Modes */ + src: local("Lato Bold"), local("Lato-Bold"), + url("../fonts/LatoLatin-Bold.eot?#iefix") format("embedded-opentype"), + /* IE6-IE8 */ url("../fonts/LatoLatin-Bold.woff2") format("woff2"), + /* Super Modern Browsers */ url("../fonts/LatoLatin-Bold.woff") + format("woff"), + /* Modern Browsers */ url("../fonts/LatoLatin-Bold.ttf") format("truetype"), + /* Safari, Android, iOS */ url("../fonts/LatoLatin-Bold.svg#Lato") + format("svg"); /* Legacy iOS */ } @font-face { - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; - src: url('../fonts/open-sans-v16-latin-regular.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Regular'), local('OpenSans-Regular'), - url('../fonts/open-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ + src: url("../fonts/open-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */ + src: local("Open Sans Regular"), local("OpenSans-Regular"), + url("../fonts/open-sans-v16-latin-regular.eot?#iefix") + format("embedded-opentype"), + /* IE6-IE8 */ url("../fonts/open-sans-v16-latin-regular.woff2") + format("woff2"), + /* Super Modern Browsers */ url("../fonts/open-sans-v16-latin-regular.woff") + format("woff"), + /* Modern Browsers */ url("../fonts/open-sans-v16-latin-regular.ttf") + format("truetype"), + /* Safari, Android, iOS */ + url("../fonts/open-sans-v16-latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */ } -html, body { +html, +body { height: 100%; } body { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; position: relative; } h1 { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 27px; color: #4b77f2; letter-spacing: 0.05rem; font-weight: 600; } .hero h1 { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 70px; color: #fff; letter-spacing: 0.2rem; @@ -76,25 +89,25 @@ h1 { text-transform: capitalize; } h2 { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 27px; color: #4b77f2; letter-spacing: 0.05rem; font-weight: 500; } h3 { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 24px; margin-bottom: 2rem; color: #545454; } - @media only screen and (max-width: 470px) { - h3{ - font-size: 20px; - } +@media only screen and (max-width: 470px) { + h3 { + font-size: 20px; + } } h4 { - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 25px; font-weight: 600; color: #4b77f2; @@ -105,16 +118,19 @@ p { font-size: 20px; } a { - color: #335ECF; - font-family: 'Open Sans', sans-serif; + color: #335ecf; + font-family: "Open Sans", sans-serif; text-decoration: none; } -a:hover, a:active, a:visited, a:focus { - color: #335ECF; +a:hover, +a:active, +a:visited, +a:focus { + color: #335ecf; text-decoration: underline; } .hero h2 { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 28px; color: #fff; font-weight: normal; @@ -126,22 +142,29 @@ a:hover, a:active, a:visited, a:focus { padding-top: 2rem; font-size: 20px; color: #525252; - font-family: 'Open Sans'; + font-family: "Open Sans"; position: relative; } .hero { height: 46rem; - background-image: linear-gradient(to right, #335ecf, #296bd3, #2577d7, #2a82d8, #368dd9); + background-image: linear-gradient( + to right, + #335ecf, + #296bd3, + #2577d7, + #2a82d8, + #368dd9 + ); background-repeat: repeat; background-size: auto; background-size: contain; background-repeat: no-repeat; background-position-x: center; - position:relative; + position: relative; } -.hero::before{ - content: ' '; +.hero::before { + content: " "; background: url(/static/design_media/libravatar_header.svg); background-position-y: 0%; width: 100%; @@ -159,20 +182,20 @@ a:hover, a:active, a:visited, a:focus { margin-bottom: -2px; } .hero .dropdown-menu { - background: #fffffff0 !important; - } + background: #fffffff0 !important; +} .hero li :hover { - background: #358cd930 !important; - } + background: #358cd930 !important; +} @media only screen and (max-width: 1000px) { -.hero { - background-size: cover; + .hero { + background-size: cover; } } .hero .btn { - background-color: #5488E6; - border: solid 2px #D5DFF9; + background-color: #5488e6; + border: solid 2px #d5dff9; border-radius: 4px; font-size: 20px; font-weight: 400; @@ -180,21 +203,21 @@ a:hover, a:active, a:visited, a:focus { margin-right: 2rem; height: 5rem; min-width: 12rem; -color:#FFFFFF; --webkit-transition: all 0.3s; --moz-transition: all 0.3s; --ms-transition: all 0.3s; -transition: all 0.3s; + color: #ffffff; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; } .hero .btn:hover { - background-color: #ADC0E1AD; - border: solid 2px #D5DFF9; + background-color: #adc0e1ad; + border: solid 2px #d5dff9; border-radius: 4px; font-size: 20px; text-transform: uppercase; font-weight: 500; } -#account_dropdown{ +#account_dropdown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -203,18 +226,25 @@ transition: all 0.3s; min-height: calc(100vh - 16rem); } footer { - background-image: linear-gradient(to right, #335ecf, #296bd3, #2577d7, #2a82d8, #368dd9); + background-image: linear-gradient( + to right, + #335ecf, + #296bd3, + #2577d7, + #2a82d8, + #368dd9 + ); background-size: auto; height: 16rem; background-size: cover; color: #fff; - font-family: 'Lato', sans-serif; + font-family: "Lato", sans-serif; font-size: 16px; position: relative; width: 100%; } -footer::before{ - content: ' '; +footer::before { + content: " "; background: url(/static/design_media/libravatar_header.svg); background-position-y: 0%; width: 100%; @@ -241,34 +271,39 @@ footer .container { padding-top: 11rem; } @media only screen and (max-width: 470px) { -footer { - height: auto; + footer { + height: auto; } } -.left { grid-area: left; } -.middle { grid-area: middle; } -.right { grid-area: right; } +.left { + grid-area: left; +} +.middle { + grid-area: middle; +} +.right { + grid-area: right; +} .main-content-container { display: grid; - grid-template-areas: - 'left middle right'; + grid-template-areas: "left middle right"; grid-gap: 5rem; padding: 10px; } @media only screen and (max-width: 1212px) { - .main-content-container { + .main-content-container { grid-template-areas: - 'left left' - 'middle right'; + "left left" + "middle right"; } } @media only screen and (max-width: 620px) { - .main-content-container { + .main-content-container { grid-template-areas: - 'left' - 'middle' - 'right'; + "left" + "middle" + "right"; } .hero h1 { font-size: 55px; @@ -284,10 +319,10 @@ footer { text-align: center; padding: 2rem 2rem; border-radius: 16px; - -webkit-box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); - -moz-box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); - box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); - border: solid 1px #335ECF29; + -webkit-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); + -moz-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); + box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); + border: solid 1px #335ecf29; } .left { flex: 1; @@ -311,61 +346,62 @@ footer { } .button { background-color: #fff; - color: #335ECF; + color: #335ecf; padding: 0.5rem 1.6rem; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: auto; - border: solid #335ECF 1px; + border: solid #335ecf 1px; border-radius: 1.5rem; margin-bottom: 2rem; font-weight: 600; letter-spacing: 0.02rem; --webkit-transition: all 0.3s; --moz-transition: all 0.3s; --ms-transition: all 0.3s; -transition: all 0.3s; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; } .button:hover { - background-color: #335ECF; - color: #FFF; + background-color: #335ecf; + color: #fff; text-decoration: none; } #contribute { - border: solid 1px #335ECF; + border: solid 1px #335ecf; font-size: 20px; width: 26rem; - color: #335ECF; + color: #335ecf; } .open > .dropdown-toggle.btn-primary:hover { color: #fff; background-color: #5588e6; - border-color: #335ECF; + border-color: #335ecf; } -.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary { +.btn-primary.active, +.btn-primary:active, +.open > .dropdown-toggle.btn-primary { color: #fff !important; background-color: #5588e6 !important; - border-color: #FFFFFF26 !important; + border-color: #ffffff26 !important; } -.btn-group{ +.btn-group { float: left; - } } -@media only screen and (max-width:1122px) { +@media only screen and (max-width: 1122px) { .hero { - height:34rem; + height: 34rem; } } @media only screen and (max-width: 620px) { .hero { - height:30rem; + height: 30rem; } } @media only screen and (max-width: 470px) { - .hero .btn{ + .hero .btn { width: 70%; margin-bottom: 0rem; justify-content: center; @@ -390,7 +426,7 @@ transition: all 0.3s; #page { overflow: hidden; } - .hero .btn{ + .hero .btn { width: 80%; justify-content: center; margin-left: 10% !important; @@ -411,15 +447,16 @@ transition: all 0.3s; #page .container #home-form { margin-bottom: 2rem; } - .btn-group, .btn-group-vertical { + .btn-group, + .btn-group-vertical { display: contents; -} + } #contribute { width: unset; } } #contribute:hover { - color: #FFF; + color: #fff; } label { font-size: 18px; @@ -451,34 +488,48 @@ header { .navbarlibravatar { background: #335ecf; /* Old browsers */ - background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + background: -moz-linear-gradient( + -45deg, + #335ecf 0%, + #368dd9 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + -45deg, + #335ecf 0%, + #368dd9 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + 135deg, + #335ecf 0%, + #368dd9 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#335ecf', endColorstr='#368dd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border-radius: unset; color: #fff; -border:0; + border: 0; } .navbarlibravatar a { color: #fff; } -.navbarlibravatar .navbar-nav > li > a:hover, .navbarlibravatar .navbar-nav > li > a:focus, .navbarlibravatar .navbar-nav > .open > a { -background-color: rgba(255, 255, 255, 0.12) !important; +.navbarlibravatar .navbar-nav > li > a:hover, +.navbarlibravatar .navbar-nav > li > a:focus, +.navbarlibravatar .navbar-nav > .open > a { + background-color: rgba(255, 255, 255, 0.12) !important; } .navbarlibravatar .dropdown-menu { -background-color:#327fd6; -border:0; + background-color: #327fd6; + border: 0; } .navbarlibravatar .navbar-right .dropdown-menu { -background-color:#368DD9; + background-color: #368dd9; } .navbarlibravatar .dropdown-menu > li > a { -color:#FFFFFF; + color: #ffffff; } .navbarlibravatar .dropdown-menu > li > a:hover { -background-color:rgba(0,0,0,0.2); + background-color: rgba(0, 0, 0, 0.2); } .navbar-toggle { position: absolute; @@ -496,64 +547,96 @@ background-color:rgba(0,0,0,0.2); color: #fff !important; text-decoration: none !important; } -.navbar-header .navbar-toggle{ +.navbar-header .navbar-toggle { padding-top: 0.2rem; } @keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* Firefox < 16 */ @-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* Internet Explorer */ @-ms-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } /* Opera < 12.1 */ @-o-keyframes fadein { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + to { + opacity: 1; + } } .panel { margin-top: 1rem; border-radius: 16px; - -webkit-box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); - -moz-box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); - box-shadow: 10px 10px 24px -3px rgba(0,0,0,0.41); + -webkit-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); + -moz-box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); + box-shadow: 10px 10px 24px -3px rgba(0, 0, 0, 0.41); border: 0; } .panel-heading { background: #335ecf; /* Old browsers */ - background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + background: -moz-linear-gradient( + -45deg, + #335ecf 0%, + #368dd9 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + -45deg, + #335ecf 0%, + #368dd9 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + 135deg, + #335ecf 0%, + #368dd9 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#335ecf', endColorstr='#368dd9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -color:#FFFFFF; -border-top-left-radius:16px; -border-top-right-radius:16px; + color: #ffffff; + border-top-left-radius: 16px; + border-top-right-radius: 16px; } .panel-title label { -margin-bottom:0; + margin-bottom: 0; } .panel-title a { -color:#FFFFFF; + color: #ffffff; } -.unconfirmed-mail-form{ +.unconfirmed-mail-form { display: inline-block; margin-right: 2rem; margin-bottom: 0rem; @@ -573,13 +656,14 @@ color:#FFFFFF; #id_export_file + label { font-weight: 600; - color: color: #335ECF; + color: #335ecf; display: inline-block; margin: auto; } #id_export_file:focus + label, #id_export_file + label:hover { + color: #335ecf; } #id_photo { @@ -593,13 +677,14 @@ color:#FFFFFF; #id_photo + label { font-weight: 600; - color: color: #335ECF; + color: #335ecf; display: inline-block; margin: auto; } #id_photo:focus + label, #id_photo + label:hover { + color: #335ecf; } .navbar-toggle { @@ -611,49 +696,64 @@ color:#FFFFFF; } .form-control { -border-width: 2px; -box-sizing: border-box; -font-family: 'Montserrat', sans-serif; -overflow: hidden; -position: relative; --webkit-transition: all 0.3s; --moz-transition: all 0.3s; --ms-transition: all 0.3s; -transition: all 0.3s; -border-color:rgba(51,94,207,0.5); -background: none; + border-width: 2px; + box-sizing: border-box; + font-family: "Montserrat", sans-serif; + overflow: hidden; + position: relative; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -ms-transition: all 0.3s; + transition: all 0.3s; + border-color: rgba(51, 94, 207, 0.5); + background: none; } .form-control:hover { -border-color:rgba(51,94,207,0.75) + border-color: rgba(51, 94, 207, 0.75); } .form-control:focus { -border-color:rgb(51,94,207); -box-shadow:none; + border-color: rgb(51, 94, 207); + box-shadow: none; } -.checkbox input, .radio input {display:none} -.checkbox input + label, .radio input + label { -padding-left:0; +.checkbox input, +.radio input { + display: none; } -.checkbox input + label:before, .radio input + label:before { -font-family: FontAwesome; -display: inline-block; -letter-spacing:5px; -font-size:20px; -color:#335ECF; +.checkbox input + label, +.radio input + label { + padding-left: 0; +} +.checkbox input + label:before, +.radio input + label:before { + font-family: FontAwesome; + display: inline-block; + letter-spacing: 5px; + font-size: 20px; + color: #335ecf; +} +.checkbox input + label:before { + content: "\f0c8"; +} +.checkbox input:checked + label:before { + content: "\f14a"; +} +.radio input + label:before { + content: "\f10c"; +} +.radio input:checked + label:before { + content: "\f192"; } -.checkbox input + label:before {content: "\f0c8"} -.checkbox input:checked + label:before {content: "\f14a"} -.radio input + label:before {content: "\f10c"} -.radio input:checked + label:before {content: "\f192"} @media only screen and (max-width: 470px) { .navbar-nav .open .dropdown-menu > li > a { color: #fff; } - .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { - background-color: #eeeeee40; - border-color: #337ab7; - color: #fff; + .nav .open > a, + .nav .open > a:focus, + .nav .open > a:hover { + background-color: #eeeeee40; + border-color: #337ab7; + color: #fff; } } .input-group-addon:last-child { @@ -661,108 +761,114 @@ color:#335ECF; border-radius: 4px; } -@media only screen and (min-width: 600px){ - .btn-group, .btn-group-vertical { +@media only screen and (min-width: 600px) { + .btn-group, + .btn-group-vertical { display: inline; } } - @media only screen and (min-width: 2000px){ - footer::before { - background: none !important; - } - footer { - height: 8rem; - position: relative; - bottom: 0; - } - footer .container { - padding-top: 3rem; - } - } - @media only screen and (min-width: 412px) and (max-width: 582px) { - #page .container.row { - display: inline-block; - } - } - @media only screen and (max-width: 599px) { - .hero .dropdown-menu { - width: 56%; - justify-content: center; - margin-left: 2.5% !important; - margin-right: 10% !important; - top: 22rem; - } - } - @media only screen and (max-width: 470px) { - .hero .dropdown-menu { - width: 80%; - justify-content: center; - margin-left: 10% !important; - margin-right: 10% !important; - top: 22rem; - } - .dropdown-menu > li > a{ - white-space: unset !important; - } - } - @media only screen and (max-width: 427px) { - .hero .dropdown-menu { - width: 80%; - justify-content: center; - margin-left: 10% !important; - margin-right: 10% !important; - top: 26rem; - } - } - @media only screen and (max-width: 290px) { - .hero .dropdown-menu { - margin-top: 7rem; - width: 90%; - margin-left: 5% !important; - margin-right: 5% !important; - } - } - @media only screen and (max-width: 230px) { - .hero .dropdown-menu { - width: 100%; - margin-left: 0 !important; - margin-right: 0 !important; - margin-top: 11rem !important; - } - } -.profile-container{ - border-top: solid 5px #2F95EDB3; +@media only screen and (min-width: 2000px) { + footer::before { + background: none !important; + } + footer { + height: 8rem; + position: relative; + bottom: 0; + } + footer .container { + padding-top: 3rem; + } +} +@media only screen and (min-width: 412px) and (max-width: 582px) { + #page .container.row { + display: inline-block; + } +} +@media only screen and (max-width: 599px) { + .hero .dropdown-menu { + width: 56%; + justify-content: center; + margin-left: 2.5% !important; + margin-right: 10% !important; + top: 22rem; + } +} +@media only screen and (max-width: 470px) { + .hero .dropdown-menu { + width: 80%; + justify-content: center; + margin-left: 10% !important; + margin-right: 10% !important; + top: 22rem; + } + .dropdown-menu > li > a { + white-space: unset !important; + } +} +@media only screen and (max-width: 427px) { + .hero .dropdown-menu { + width: 80%; + justify-content: center; + margin-left: 10% !important; + margin-right: 10% !important; + top: 26rem; + } +} +@media only screen and (max-width: 290px) { + .hero .dropdown-menu { + margin-top: 7rem; + width: 90%; + margin-left: 5% !important; + margin-right: 5% !important; + } +} +@media only screen and (max-width: 230px) { + .hero .dropdown-menu { + width: 100%; + margin-left: 0 !important; + margin-right: 0 !important; + margin-top: 11rem !important; + } +} +.profile-container { + border-top: solid 5px #2f95edb3; display: grid; padding-top: 1rem; padding-bottom: 1rem; } -.profile-container img{ +.profile-container img { margin: 0.5em; } -.panel-body.profile > div, .panel-body.profile > img { +.panel-body.profile > div, +.panel-body.profile > img { text-align: left; } -.panel-heading.profile{ +.panel-heading.profile { background: none; border-top-left-radius: unset; border-top-right-radius: unset; } -.profile-container > h3{ +.profile-container > h3 { color: #353535; font-weight: bold; } -.profile-container > ul > li > a, .profile-container button{ +.profile-container > ul > li > a, +.profile-container button { color: #353535; text-decoration: none; } -.profile-container.active{ - border-top: solid 5px #335ECF; +.profile-container.active { + border-top: solid 5px #335ecf; } -.profile-container ul > li > button:hover, .profile-container ul > li > a:hover{ - color: #335ECF; +.profile-container ul > li > button:hover, +.profile-container ul > li > a:hover { + color: #335ecf; } -.email-profile { grid-area: email; } -.profile-container{ +.email-profile { + grid-area: email; +} +.profile-container { padding-top: 2rem; } .profile-container > img { @@ -772,10 +878,10 @@ color:#335ECF; .profile-container > ul { grid-area: list; list-style-type: none; - padding:0; + padding: 0; font-size: 18px; } -.profile-container > ul > li{ +.profile-container > ul > li { padding-top: 0.5rem; } @media only screen and (max-width: 420px) { @@ -783,14 +889,14 @@ color:#335ECF; padding-top: 0.85rem; } } -.profile-container > ul > li > a:hover{ +.profile-container > ul > li > a:hover { text-decoration: none; } .profile-container { display: grid; grid-template-areas: - 'img email email email email email' - 'img list list list list list'; + "img email email email email email" + "img list list list list list"; grid-gap: 0; grid-template-columns: 20% 80%; } @@ -799,69 +905,138 @@ color:#335ECF; grid-template-columns: 40% 60%; } } -.profile-container > div, profile-container > img { +.profile-container > div, +profile-container > img { text-align: center; } -.profile-container.active > img{ - max-height:120px; - max-width:120px; +.profile-container.active > img { + max-height: 120px; + max-width: 120px; } @media only screen and (max-width: 420px) { .profile-container.active > img { - max-height:80px; - max-width:80px; + max-height: 80px; + max-width: 80px; } } -.profile-container > ul{ - display:none +.profile-container > ul { + display: none; } -.profile-container.active > ul{ - display:block; +.profile-container.active > ul { + display: block; } -.profile-container > img{ - max-height:80px; - max-width:80px; +.profile-container > img { + max-height: 80px; + max-width: 80px; } -h3.panel-title{ +h3.panel-title { margin-top: unset; } -.profile-container > h3{ +.profile-container > h3 { padding-top: 26px; } @media only screen and (max-width: 470px) { - .profile-container > h3{ + .profile-container > h3 { padding-top: 20px; } } .profile-container:hover { cursor: pointer; } -.profile-container.active > h3{ +.profile-container.active > h3 { padding-top: 12px; } -.profile-container.active{ +.profile-container.active { cursor: pointer; background: #dcdcdcb5; } -.profile-container.active:hover{ - cursor:auto; +.profile-container.active:hover { + cursor: auto; } @media only screen and (min-width: 768px) { .profile-container:hover ul { - display:block !important; + display: block !important; } .profile-container:hover { background: #dcdcdcb5; } - .profile-container:hover img{ - max-height:120px; - max-width:120px; + .profile-container:hover img { + max-height: 120px; + max-width: 120px; } - .profile-container:hover h3{ + .profile-container:hover h3 { padding-top: 12px; } } .alert-success { - color: #353535; - background-color: #3582d71f; + color: #353535; + background-color: #3582d71f; +} + +/* Photo assignment page styles */ +.nobutton { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + +.photo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; + margin-bottom: 2rem; +} + +@media (max-width: 768px) { + .photo-grid { + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; + } +} + +@media (max-width: 480px) { + .photo-grid { + grid-template-columns: 1fr; + gap: 0.5rem; + } +} + +.photo-card { + width: 100%; + margin: 0; +} + +.photo-card .panel { + width: 100% !important; + margin: 0 !important; +} + +.action-buttons { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 2rem; +} + +@media (min-width: 768px) { + .action-buttons { + flex-direction: row; + justify-content: center; + } +} + +.action-buttons .button { + width: 100%; + text-align: center; +} + +@media (min-width: 768px) { + .action-buttons .button { + width: auto; + min-width: 200px; + } }