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">
-  <form action="{% url 'assign_photo_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+<div class="photo-grid">
+  <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">
-    <div class="panel panel-tortin" style="width:132px;margin:0">
+  <form action="" class="photo-card">
+    <div class="panel panel-tortin">
       <div class="panel-heading">
         <h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
       </div>
@@ -70,26 +60,22 @@ outline: inherit;
   {% endif %}
 </div>
 
-<div class="row">
-  <div style="height:8px"></div>
-    <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>
-    <form action="{% url 'assign_bluesky_handle_to_email' view.kwargs.email_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
-      <div class="form-group">
-        <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
-        {% if email.bluesky_handle %}
-          <input type="text" name="bluesky_handle" required value="{{ email.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
-        {% else %}
-          <input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
-        {% endif %}
-      </div>
-      <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
-    </form>
-  </div>
+<div class="action-buttons">
+  <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:40px"></div>
+<div style="margin-top: 2rem;">
+  <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 %}
+        <input type="text" name="bluesky_handle" required value="{{ email.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
+      {% else %}
+        <input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
+      {% endif %}
+    </div>
+    <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
+  </form>
+</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">
-  <form action="{% url 'assign_photo_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
+<div class="photo-grid">
+  <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">
-    <div class="panel panel-tortin" style="width:132px;margin:0">
+  <form action="" class="photo-card">
+    <div class="panel panel-tortin">
       <div class="panel-heading">
         <h3 class="panel-title"><i class="fa fa-check"></i> {% trans "Bluesky" %}</h3>
       </div>
@@ -71,26 +60,22 @@ outline: inherit;
   {% endif %}
 </div>
 
-<div class="row">
-  <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>
-    <form action="{% url 'assign_bluesky_handle_to_openid' view.kwargs.openid_id %}" method="post" style="float:left;margin-left:20px">{% csrf_token %}
-      <div class="form-group">
-        <label for="id_bluesky_handle">{% trans "Bluesky handle" %}:</label>
-        {% if openid.bluesky_handle %}
-          <input type="text" name="bluesky_handle" required value="{{ openid.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
-        {% else %}
-          <input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
-        {% endif %}
-      </div>
-      <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
-    </form>
-  </div>
+<div class="action-buttons">
+  <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:40px"></div>
+<div style="margin-top: 2rem;">
+  <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 %}
+        <input type="text" name="bluesky_handle" required value="{{ openid.bluesky_handle }}" class="form-control" id="id_bluesky_handle">
+      {% else %}
+        <input type="text" name="bluesky_handle" required value="" placeholder="{% trans 'Bluesky handle' %}" class="form-control" id="id_bluesky_handle">
+      {% endif %}
+    </div>
+    <button type="submit" class="button">{% trans 'Assign Bluesky handle' %}</button>
+  </form>
+</div>
 {% endblock content %}