responsive design tweaks at small breakpoints

fablabbcn · Oct 31, 2024 · 40534e5 · 40534e5
1 parent f4f5151
commit 40534e5
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 26 deletions.
diff --git a/app/assets/stylesheets/bootstrap_variables.scss b/app/assets/stylesheets/bootstrap_variables.scss
@@ -1,3 +1,20 @@
+
+/* Override bootstrap width class definitions to make them responsive,
+   allowing things like w-md-100 etc */
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/maps";
+@import "bootstrap/mixins";
+@import "bootstrap/utilities";
+
+$utilities: map-merge(
+  $utilities, ( "width": map-merge(
+    map-get( $utilities, "width"), ( responsive: true ),
+  ),)
+);
+
+/* END override bootstrap width class definitions */
+
 $black: #1C1C1C;
 $grey-900: #2E2E2E;
 $grey-800: #4F4F4F;

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -1,46 +1,46 @@
-<footer class="bg-black text-white mt-5 pt-5 pb-3">
+<footer class="bg-black text-white mt-5 pt-3 pt-lg-5 pb-3">
   <div class="container px-0">
-    <div class="row d-flex flex-md-row flex-column justify-content-md-between mb-5">
-      <div class="w-auto">
+    <div class="row d-flex flex-lg-row flex-column justify-content-lg-between mb-0 mb-lg-5 px-4 px-lg-0">
+      <div class="w-100 w-lg-auto mb-5 mb-lg-0 mx-0 g-0">
         <img style="height: 80px; pointer-events: auto;" src="<%= image_url("smartcitizen_logo2.svg") %>" alt="Smart Citizen">
       </div>
-      <div class="w-auto">
-        <div class="outlined-box p-3 row align-items-center width-fit-content">
-          <div class="col-md-auto">Follow us</div>
+      <div class="w-100 w-lg-auto mb-3 mb-lg-0 mx-0 g-0">
+        <div class="outlined-box p-3 row align-items-center width-lg-fit-content mx-1 mx-lg-0">
+          <div class="col-auto">Follow us</div>
           <a class="col-auto" href="https://twitter.com/smartcitizenkit">
             <img height="36" src="<%= image_url("tw.svg") %>" alt="Twitter" />
           </a>
-          <a class="col-md-auto" href="https://www.facebook.com/smartcitizenBCN/">
+          <a class="col-auto" href="https://www.facebook.com/smartcitizenBCN/">
             <img height="36" src="<%= image_url("fb.svg") %>" alt="Facebook" />
           </a>
-          <a class="col-md-auto" href="https://www.instagram.com/smartcitizenkit/">
+          <a class="col-auto" href="https://www.instagram.com/smartcitizenkit/">
             <img height="36" src="<%= image_url("in.svg") %>" alt="Instagram" />
           </a>
         </div>
       </div>
-      <div class="w-auto">
-        <div class="outlined-box p-3 row align-items-center width-fit-content">
-          <div class="col-md-auto">A project by</div>
-          <div class="col-md-auto">
+      <div class="w-100 w-lg-auto mb-5 mb-lg-0 mx-0 g-0">
+        <div class="outlined-box p-3 row align-items-center width-lg-fit-content mx-1 mx-lg-0">
+          <div class="col-auto">A project by</div>
+          <div class="col-auto">
             <img height="36" src="<%= image_url("logo_fablab_bcn_small.png") %>" alt="Fablab BCN" />
           </div>
-          <div class="col-md-auto">
+          <div class="col-auto">
             <img height="16" src="<%= image_url("iaac.png") %>" alt="IAAC">
           </div>
         </div>
       </div>
-      <div class="w-auto">
-        <div class="row align-items-center width-fit-content">
-          <div class="col-md-auto d-flex justify-content-space-around flex-direction-column">
+      <div class="w-100 w-lg-auto mb-3 mb-lg-0 mx-0 g-0">
+        <div class="row align-items-center width-lg-fit-content">
+          <div class="col-auto d-flex justify-content-space-around flex-direction-column">
             <img height="48" src="<%= image_url("eu_flag.png") %>" alt="" />
           </div>
-          <div class="col-md-auto d-flex justify-content-space-around flex-direction-column">
+          <div class="col-auto d-flex justify-content-space-around flex-direction-column">
             <p class="mb-0"><small>Smart Citizen has received funding from the<br />European Community’s H2020 Programme<br />under Grant Agreement No. 689954.</small></p>
           </div>
         </div>
       </div>
     </div>
-    <div class="row text-center">
+    <div class="row text-lg-center px-3 px-lg-0 mx-0 g-0">
       <p><small>Except where otherwise noted, content on this site by Smart Citizen® is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. Check the <a rel="policy" href="https://smartcitizen.me/policy">Terms of use and Privacy Policy</a>.</small></p>
     </div>
   </div>

diff --git a/app/views/layouts/_nav.html.erb b/app/views/layouts/_nav.html.erb
@@ -1,5 +1,5 @@
 <nav class="navbar navbar-dark navbar-expand-md bg-black m-2 sticky-top rounded-4">
-  <div class="container px-2 px-md-0">
+  <div class="container px-4 px-md-0">
     <a class="navbar-brand" href="https://www.smartcitizen.me">
       <img src="<%= image_url("smartcitizen_logo.svg") %>" alt="SmartCitizen" width="36" height ="36" />
     </a>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -11,7 +11,7 @@
   <body>
     <%= render partial: "layouts/flashes" %>
     <%= render partial: "layouts/nav" %>
-    <div class="container bg-white mt-5 px-4 pb-5 pt-4 border border-thick">
+    <div class="container mx-2 mx-md-auto w-auto w-md-100 bg-white mt-5 px-4 pb-5 pt-4 border border-thick">
       <% if @title %>
         <header>
           <h1 class="mb-4"><%= @title %></h1>

diff --git a/app/views/ui/sessions/new.html.erb b/app/views/ui/sessions/new.html.erb
@@ -3,16 +3,16 @@
         <%= f.password_field :password %>
     <%= f.hidden_field :goto, value: params[:goto] %>
     <div class="mt-4">
-      <%= f.primary "Sign into your account" %>
+      <%= f.primary "Sign into your account", class: "btn btn-primary w-100 w-md-auto" %>
     </div>
     <div class="row mt-4">
       <div class="col-md-6">
         <h4 class="my-3">Don't have an account?</h4>
-        <a class="btn btn-secondary" href="https://www.smartcitizen.me/signup">Sign up</a>
+        <a class="btn btn-secondary w-100 w-md-auto" href="https://www.smartcitizen.me/signup">Sign up</a>
       </div>
       <div class="col-md-6">
         <h4 class="my-3">Forgot your password?</h4>
-        <%= f.submit "Reset password",  name: 'send_password_email' %>
+        <%= f.submit "Reset password",  name: 'send_password_email', class: "btn btn-secondary w-100 w-md-auto" %>
       </div>
     </div>
 <% end %>
diff --git a/app/views/ui/sessions/password_reset_landing.html.erb b/app/views/ui/sessions/password_reset_landing.html.erb
@@ -3,6 +3,6 @@
   <%= f.password_field :password %>
   <%= f.password_field :password_confirmation, label: "Confirm new password" %>
   <div class="mt-4">
-    <%= f.primary "Change my password", name: 'change_password' %>
+    <%= f.primary "Change my password", name: 'change_password', class: "btn btn-primary w-100 w-md-auto" %>
   </div>
 <% end %>
diff --git a/app/views/ui/users/index.html.erb b/app/views/ui/users/index.html.erb
@@ -2,8 +2,8 @@
   <p>Logged in as <%= current_user.email %>. </p>
   <p>Your access token:
   <br /><code><%= current_user.access_token.token %></code></p>
-  <p><%= link_to "Log out", logout_path, class: "btn btn-secondary" %></p>
+  <p><%= link_to "Log out", logout_path, class: "btn btn-secondary w-100 w-md-auto" %></p>
 <% else %>
   <p>Not logged in!</p>
-  <a class="btn btn-secondary" href="<%= new_ui_session_path %>">Go back</a>
+  <a class="btn btn-secondary w-100 w-md-auto" href="<%= new_ui_session_path %>">Go back</a>
 <% end %>