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

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 %}
-<style>
-.nobutton {
-background: none;
-color: inherit;
-border: none;
-padding: 0;
-font: inherit;
-cursor: pointer;
-outline: inherit;
-}
-</style>
 <h1>{% blocktrans with email.email as email_address %}Choose a photo for {{ email_address }}{% endblocktrans %}</h1>
 
 {% if user.photo_set.count %}
   <p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this email address:' %}</p>
-  <div class="row">
+  <div class="photo-grid">
     {% for photo in user.photo_set.all %}
-      <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+      <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
         <input type="hidden" name="photo_id" value="{{ photo.id }}">
         <button type="submit" name="photo{{ photo.id }}" class="nobutton">
-          <div class="panel panel-tortin" style="width:132px;margin:0">
+          <div class="panel panel-tortin">
             <div class="panel-heading">
               <h3 class="panel-title">{% if email.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
             </div>
@@ -37,12 +26,13 @@ outline: inherit;
         </button>
       </form>
     {% endfor %}
+  </div>
 {% endif %}
 
-<div class="row">
+<div class="photo-grid">
-  <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+  <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" class="photo-card">{% csrf_token %}
     <button type="submit" name="photoNone" class="nobutton">
-      <div class="panel panel-tortin" style="width:132px;margin:0">
+      <div class="panel panel-tortin">
         <div class="panel-heading">
           <h3 class="panel-title">{% if email.photo.id == photo.id %}{% if not email.bluesky_handle %}<i class="fa fa-check"></i>{% endif %}{% endif %} {% trans 'No image' %}</h3>
         </div>
@@ -55,8 +45,8 @@ outline: inherit;
     </button>
   </form>
   {% if email.bluesky_handle %}
-  <form action="" style="float:left;margin-left:20px">
+  <form action="" class="photo-card">
-    <div class="panel panel-tortin" style="width:132px;margin:0">
+    <div class="panel panel-tortin">
       <div class="panel-heading">
         <h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
       </div>
@@ -70,14 +60,13 @@ outline: inherit;
   {% endif %}
 </div>
 
-<div class="row">
+<div class="action-buttons">
-  <div style="height:8px"></div>
+  <a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>
-    <a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}Upload a new one{% endblocktrans %}</a>&nbsp;&nbsp;
   <a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
 </div>
 
-  <div style="height:8px"></div>
+<div style="margin-top: 2rem;">
-    <form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+  <form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post">{% csrf_token %}
     <div class="form-group">
       <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
       {% if email.bluesky_handle %}
@@ -89,7 +78,4 @@ outline: inherit;
     <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
   </form>
 </div>
-</div>
-
-<div style="height:40px"></div>
 {% endblock content %}

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 %}
-<style>
-.nobutton {
-background: none;
-color: inherit;
-border: none;
-padding: 0;
-font: inherit;
-cursor: pointer;
-outline: inherit;
-}
-</style>
 <h1>{% blocktrans with openid.openid as openid_address %}Choose a photo for {{ openid_address }}{% endblocktrans %}</h1>
 
 {% if user.photo_set.count %}
   <p>{% trans 'Here are the pictures you have uploaded, click on the one you wish to associate with this openid address:' %}</p>
-  <div class="row">
+  <div class="photo-grid">
   {% for photo in user.photo_set.all %}
-  <form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+  <form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" class="photo-card">{% csrf_token %}
     <input type="hidden" name="photo_id" value="{{ photo.id }}">
     <button type="submit" name="photo{{ photo.id }}" class="nobutton">
-  <div class="panel panel-tortin" style="width:132px;margin:0">
+  <div class="panel panel-tortin">
     <div class="panel-heading">
       <h3 class="panel-title">{% if openid.photo.id == photo.id %}<i class="fa fa-check"></i>{% endif %} {% trans 'Image' %} {{ forloop.counter }}</h3>
   </div>
@@ -37,13 +26,13 @@ outline: inherit;
   </button>
     </form>
   {% endfor %}
-
+  </div>
 {% endif %}
 
-<div class="row">
+<div class="photo-grid">
-  <form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+  <form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" class="photo-card">{% csrf_token %}
     <button type="submit" name="photoNone" class="nobutton">
-      <div class="panel panel-tortin" style="width:132px;margin:0">
+      <div class="panel panel-tortin">
         <div class="panel-heading">
           <h3 class="panel-title">{% if not openid.photo and not openid.bluesky_handle %}<i class="fa fa-check"></i>{% endif %} {% trans 'No image' %}</h3>
         </div>
@@ -56,8 +45,8 @@ outline: inherit;
     </button>
   </form>
   {% if openid.bluesky_handle %}
-  <form action="" style="float:left;margin-left:20px">
+  <form action="" class="photo-card">
-    <div class="panel panel-tortin" style="width:132px;margin:0">
+    <div class="panel panel-tortin">
       <div class="panel-heading">
         <h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
       </div>
@@ -71,14 +60,13 @@ outline: inherit;
   {% endif %}
 </div>
 
-<div class="row">
+<div class="action-buttons">
-  <div style="height:8px"></div>
   <a href="{% url 'upload_photo' %}" class="button">{% blocktrans %}upload a new one{% endblocktrans %}</a>
   <a href="{% url 'import_photo' %}" class="button">{% blocktrans %}Import from other services{% endblocktrans %}</a>
 </div>
 
-  <div style="height:8px"></div>
+<div style="margin-top: 2rem;">
-    <form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+  <form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post">{% csrf_token %}
     <div class="form-group">
       <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
       {% if openid.bluesky_handle %}
@@ -90,7 +78,4 @@ outline: inherit;
     <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
   </form>
 </div>
-</div>
-
-<div style="height:40px"></div>
 {% endblock content %}

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: url("../fonts/lato-v15-latin-300.eot"); /* IE9 Compat Modes */
-  src: local('Lato Light'), local('Lato-Light'),
+  src: local("Lato Light"), local("Lato-Light"),
-       url('../fonts/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("../fonts/LatoLatin-Light.eot?#iefix") format("embedded-opentype"),
-       url('../fonts/LatoLatin-Light.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url("../fonts/LatoLatin-Light.woff2") format("woff2"),
-       url('../fonts/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url("../fonts/LatoLatin-Light.woff")
-       url('../fonts/LatoLatin-Light.ttf') format('truetype'), /* Safari, Android, iOS */
+      format("woff"),
-       url('../fonts/LatoLatin-Light.svg#Lato') format('svg'); /* Legacy iOS */
+    /* 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: url("../fonts/lato-v15-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local('Lato Regular'), local('Lato-Regular'),
+  src: local("Lato Regular"), local("Lato-Regular"),
-       url('../fonts/LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("../fonts/LatoLatin-Regular.eot?#iefix") format("embedded-opentype"),
-       url('../fonts/LatoLatin-Regular.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url("../fonts/LatoLatin-Regular.woff2") format("woff2"),
-       url('../fonts/LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url("../fonts/LatoLatin-Regular.woff")
-       url('../fonts/LatoLatin-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
+      format("woff"),
-       url('../fonts/LatoLatin-Regular.svg#Lato') format('svg'); /* Legacy iOS */
+    /* 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: url("../fonts/lato-v15-latin-700.eot"); /* IE9 Compat Modes */
-  src: local('Lato Bold'), local('Lato-Bold'),
+  src: local("Lato Bold"), local("Lato-Bold"),
-       url('../fonts/LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("../fonts/LatoLatin-Bold.eot?#iefix") format("embedded-opentype"),
-       url('../fonts/LatoLatin-Bold.woff2') format('woff2'), /* Super Modern Browsers */
+    /* IE6-IE8 */ url("../fonts/LatoLatin-Bold.woff2") format("woff2"),
-       url('../fonts/LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
+    /* Super Modern Browsers */ url("../fonts/LatoLatin-Bold.woff")
-       url('../fonts/LatoLatin-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
+      format("woff"),
-       url('../fonts/LatoLatin-Bold.svg#Lato') format('svg'); /* Legacy iOS */
+    /* 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: url("../fonts/open-sans-v16-latin-regular.eot"); /* IE9 Compat Modes */
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+  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.eot?#iefix")
-  url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+      format("embedded-opentype"),
-  url('../fonts/open-sans-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
+    /* IE6-IE8 */ url("../fonts/open-sans-v16-latin-regular.woff2")
-  url('../fonts/open-sans-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+      format("woff2"),
-  url('../fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+    /* 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,14 +89,14 @@ 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;
@@ -94,7 +107,7 @@ h3 {
   }
 }
 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;
+  color: #335ecf;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   text-decoration: none;
 }
-a:hover, a:active, a:visited, a:focus {
+a:hover,
-  color: #335ECF;
+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,12 +142,19 @@ 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;
@@ -141,7 +164,7 @@ a:hover, a:active, a:visited, a:focus {
 }
 
 .hero::before {
-  content: ' ';
+  content: " ";
   background: url(/static/design_media/libravatar_header.svg);
   background-position-y: 0%;
   width: 100%;
@@ -171,8 +194,8 @@ a:hover, a:active, a:visited, a:focus {
   }
 }
 .hero .btn {
-  background-color: #5488E6;
+  background-color: #5488e6;
-  border: solid 2px #D5DFF9;
+  border: solid 2px #d5dff9;
   border-radius: 4px;
   font-size: 20px;
   font-weight: 400;
@@ -180,15 +203,15 @@ a:hover, a:active, a:visited, a:focus {
   margin-right: 2rem;
   height: 5rem;
   min-width: 12rem;
-color:#FFFFFF;
+  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;
+  background-color: #adc0e1ad;
-  border: solid 2px #D5DFF9;
+  border: solid 2px #d5dff9;
   border-radius: 4px;
   font-size: 20px;
   text-transform: uppercase;
@@ -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: ' ';
+  content: " ";
   background: url(/static/design_media/libravatar_header.svg);
   background-position-y: 0%;
   width: 100%;
@@ -245,30 +275,35 @@ footer {
     height: auto;
   }
 }
-.left { grid-area: left; }
+.left {
-.middle { grid-area: middle; }
+  grid-area: left;
-.right { grid-area: right; }
+}
+.middle {
+  grid-area: middle;
+}
+.right {
+  grid-area: right;
+}
 
 .main-content-container {
   display: grid;
-  grid-template-areas:
+  grid-template-areas: "left middle right";
-  'left middle right';
   grid-gap: 5rem;
   padding: 10px;
 }
 @media only screen and (max-width: 1212px) {
   .main-content-container {
     grid-template-areas:
-    'left left'
+      "left left"
-    'middle right';
+      "middle right";
   }
 }
 @media only screen and (max-width: 620px) {
   .main-content-container {
     grid-template-areas:
-    'left'
+      "left"
-    'middle'
+      "middle"
-    'right';
+      "right";
   }
   .hero h1 {
     font-size: 55px;
@@ -287,7 +322,7 @@ footer {
   -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;
+  border: solid 1px #335ecf29;
 }
 .left {
   flex: 1;
@@ -311,14 +346,14 @@ 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;
@@ -329,31 +364,32 @@ footer {
   transition: all 0.3s;
 }
 .button:hover {
-  background-color: #335ECF;
+  background-color: #335ecf;
-  color: #FFF;
+  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 {
   float: left;
 }
-}
 @media only screen and (max-width: 1122px) {
   .hero {
     height: 34rem;
@@ -411,7 +447,8 @@ transition: all 0.3s;
   #page .container #home-form {
     margin-bottom: 2rem;
   }
-  .btn-group, .btn-group-vertical {
+  .btn-group,
+  .btn-group-vertical {
     display: contents;
   }
   #contribute {
@@ -419,7 +456,7 @@ transition: all 0.3s;
   }
 }
 #contribute:hover {
-  color: #FFF;
+  color: #fff;
 }
 label {
   font-size: 18px;
@@ -451,9 +488,21 @@ header {
 
 .navbarlibravatar {
   background: #335ecf; /* Old browsers */
-  background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */
+  background: -moz-linear-gradient(
-  background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */
+    -45deg,
-  background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    #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;
@@ -464,7 +513,9 @@ border:0;
   color: #fff;
 }
 
-.navbarlibravatar .navbar-nav > li > a:hover, .navbarlibravatar .navbar-nav > li > a:focus, .navbarlibravatar .navbar-nav > .open > a {
+.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 {
@@ -472,10 +523,10 @@ 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);
@@ -501,32 +552,52 @@ background-color:rgba(0,0,0,0.2);
 }
 
 @keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Firefox < 16 */
 @-moz-keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Internet Explorer */
 @-ms-keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Opera < 12.1 */
 @-o-keyframes fadein {
-  from { opacity: 0; }
+  from {
-  to   { opacity: 1; }
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .panel {
@@ -539,11 +610,23 @@ background-color:rgba(0,0,0,0.2);
 }
 .panel-heading {
   background: #335ecf; /* Old browsers */
-  background: -moz-linear-gradient(-45deg, #335ecf 0%, #368dd9 100%); /* FF3.6-15 */
+  background: -moz-linear-gradient(
-  background: -webkit-linear-gradient(-45deg, #335ecf 0%,#368dd9 100%); /* Chrome10-25,Safari5.1-6 */
+    -45deg,
-  background: linear-gradient(135deg, #335ecf 0%,#368dd9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    #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;
+  color: #ffffff;
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
 }
@@ -551,7 +634,7 @@ border-top-right-radius:16px;
   margin-bottom: 0;
 }
 .panel-title a {
-color:#FFFFFF;
+  color: #ffffff;
 }
 .unconfirmed-mail-form {
   display: inline-block;
@@ -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 {
@@ -613,7 +698,7 @@ color:#FFFFFF;
 .form-control {
   border-width: 2px;
   box-sizing: border-box;
-font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
   overflow: hidden;
   position: relative;
   -webkit-transition: all 0.3s;
@@ -624,33 +709,48 @@ 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;
 }
-.checkbox input, .radio input {display:none}
+.checkbox input,
-.checkbox input + label, .radio input + label {
+.radio input {
+  display: none;
+}
+.checkbox input + label,
+.radio input + label {
   padding-left: 0;
 }
-.checkbox input + label:before, .radio input + label:before {
+.checkbox input + label:before,
+.radio input + label:before {
   font-family: FontAwesome;
   display: inline-block;
   letter-spacing: 5px;
   font-size: 20px;
-color:#335ECF;
+  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 {
+  .nav .open > a,
+  .nav .open > a:focus,
+  .nav .open > a:hover {
     background-color: #eeeeee40;
     border-color: #337ab7;
     color: #fff;
@@ -662,7 +762,8 @@ color:#335ECF;
 }
 
 @media only screen and (min-width: 600px) {
-  .btn-group, .btn-group-vertical {
+  .btn-group,
+  .btn-group-vertical {
     display: inline;
   }
 }
@@ -731,7 +832,7 @@ color:#335ECF;
   }
 }
 .profile-container {
-  border-top: solid 5px #2F95EDB3;
+  border-top: solid 5px #2f95edb3;
   display: grid;
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -739,7 +840,8 @@ color:#335ECF;
 .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 {
@@ -751,17 +853,21 @@ color:#335ECF;
   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;
+  border-top: solid 5px #335ecf;
 }
-.profile-container ul > li > button:hover, .profile-container ul > li > a:hover{
+.profile-container ul > li > button:hover,
-  color: #335ECF;
+.profile-container ul > li > a:hover {
+  color: #335ecf;
+}
+.email-profile {
+  grid-area: email;
 }
-.email-profile { grid-area: email; }
 .profile-container {
   padding-top: 2rem;
 }
@@ -789,8 +895,8 @@ color:#335ECF;
 .profile-container {
   display: grid;
   grid-template-areas:
-    'img email email email email email'
+    "img email email email email email"
-    'img list list list list list';
+    "img list list list list list";
   grid-gap: 0;
   grid-template-columns: 20% 80%;
 }
@@ -799,7 +905,8 @@ 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 {
@@ -813,7 +920,7 @@ color:#335ECF;
   }
 }
 .profile-container > ul {
-  display:none
+  display: none;
 }
 .profile-container.active > ul {
   display: block;
@@ -865,3 +972,71 @@ h3.panel-title{
   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;
+  }
+}