Make the app responsive

1d9efd63 · Camille Simiand · 2aa27d97 · 1d9efd63 · 1d9efd63 · 1d9efd63
Commit 1d9efd63 authored 3 years ago by Camille Simiand
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -53,7 +53,6 @@ button[type=submit]{
  border-radius: 3px;
  line-height: 1.5;
  font-size: 1rem;
-  margin: 30px 0 0 0;
  padding: .5rem 1rem;
  text-align: center;
  text-transform: uppercase;
@@ -83,8 +82,6 @@ button[type=submit]{
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  border-radius: 2px;
  margin-bottom: 40px;
-  align-items: center;
-  justify-content: center;
 }

 .list-item {
@@ -125,7 +122,6 @@ button[type=submit]{
  text-decoration: none;
  float: left;
  color: rgba(255,255,255,.75) !important;
-  font-size: 24px;
  line-height: 60px;
  background: -webkit-linear-gradient(top left, #FA772E, #FC4326);
  -webkit-background-clip: text;

--- a/templates/capsule/editors/list_editors.html.twig
+++ b/templates/capsule/editors/list_editors.html.twig
@@ -29,7 +29,14 @@
            </div>
        {% endfor %}

-        <div class="d-flex flex-row flex-md-row justify-content-start">
+        <div class="d-flex flex-md-row flex-column justify-content-start">
+            <div class="d-flex flex-column justify-content-center ms-md-5 ms-0 order-md-2 mb-4 col-sm-8 col-md-6 col-lg-5 col-xl-4">
+                {{ form_start(userPermissionsCapsuleForm, {'attr': {novalidate: 'novalidate'}}) }}
+                {{ form_row(userPermissionsCapsuleForm.email, {'row_attr': {'class' : 'm-auto mb-4'}})  }}
+                {{ form_row(userPermissionsCapsuleForm.validate) }}
+                {{ form_end(userPermissionsCapsuleForm) }}
+            </div>
+
            <div class="d-flex flex-row pe-md-5 pb-3 fw-normal me-0 me-md-5">
                <div class="pe-3 pe-md-4 text-nowrap">
                    <h5>
@@ -55,13 +62,6 @@
                </div>
            </div>
            
-            <div class="d-flex flex-column justify-content-center ms-5">
-                {{ form_start(userPermissionsCapsuleForm, {'attr': {novalidate: 'novalidate'}}) }}
-                {{ form_row(userPermissionsCapsuleForm.email, {'row_attr': {'class' : 'm-auto mb-4 col-12'}})  }}
-                {{ form_row(userPermissionsCapsuleForm.validate, {'row_attr': {'class' : 'm-auto mb-5 col-2'}})  }}
-                {{ form_end(userPermissionsCapsuleForm) }}
-            </div>
-
        </div>
    </div>


--- a/templates/capsule/index.html.twig
+++ b/templates/capsule/index.html.twig
@@ -8,20 +8,23 @@

 {% block body %}
    <div class="row gx-0">
-        <div class="row-title-box">
-            <h3 class="row-title">
+        <div class="row-title-box d-flex justify-content-between align-items-center">
+            <h2 class="row-title">
                {{ 'capsule.title'|trans }}
-            </h3>
+            </h2>
+            <form class="d-none d-md-flex">
+                <button id="btn-orange" formaction="/create">
+                    + {{ 'capsule.create_capsule'|trans }}
+                </button>
+            </form>
        </div>
    </div>
-<div class="mt-4">
-    <div class="d-flex justify-content-center align-items-center">
-        <form>
+
+    <form class="d-md-none d-flex justify-content-center align-items-center">
        <button id="btn-orange" formaction="/create">
           + {{ 'capsule.create_capsule'|trans }}
        </button>
    </form>
-    </div>

    {% for flashWarning in app.flashes('warning') %}
        <div class="text-center alert alert-warning col-5 mx-auto my-5" role="alert">
@@ -37,9 +40,9 @@

 </div>

-    <div class="capsules-list d-flex flex-column m-6">
+    <div class="d-flex flex-column align-items-center mt-4 mb-4">
        {% for capsule in capsules %}
-        <div class="capsule-item pb-4 m-5">
+        <div class="capsule-item pb-4 col-12 col-lg-10 col-xl-8">
            <div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
                <div class="list-item">
                    <a href="/capsule/preview/{{ capsule.getLinkPath() }}" class="capsule-title">

--- a/templates/layout.html.twig
+++ b/templates/layout.html.twig
@@ -18,7 +18,7 @@

 </head>

-<body class="container col-10 col-md-8 col-lg-6 m-auto">
+<body class="container col-10 col-md-8 m-auto">
 <div class="position-relative d-flex flex-row align-items-center justify-content-center mb-5">
  <a href="/my_capsules" class="align-self-center">
    <img id="header-memorekall-logo" class="memorekall-logo" src="{{ asset('build/images/MemoRekall.png') }}">