Merge pull request #177 from barbaraperic/develop

FIX: #68 desktop layout for reports page
codeforcroatia · Nov 14, 2021 · 9691986 · 9691986
2 parents e2fb20b + 0cf60a1
commit 9691986
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git a/templates/web/popravitodev/reports/index.html b/templates/web/popravitodev/reports/index.html
@@ -67,29 +67,32 @@ <h1>[% loc('Dashboard') %]
         <h2>[% loc('Show reports in your area') %]</h2>
       [% IF body %]
         <!-- <label for="ward">[% loc('Pick your ward') %]</label> -->
-        <div class="dashboard-search__input">
-            <select id="ward" name="ward" class="js-autocomplete">
-                <option value="Upiši naziv ulice ili mjesto">[% loc('Pick your ward') %]</option>
-              [% FOR child IN children.values.sort('name') %]
-                <option>[% child.name | html ~%]</option>
-              [% END %]
-            </select>
-        </div>
-      [% ELSE %]
-        <!-- <label for="body">[% loc('Pick your council') %]</label> -->
-        <div class="dashboard-search__input">
-            <select id="body" name="body" class="js-autocomplete">
-                <option value="Upiši naziv ulice ili mjesto">[% loc('Pick your council') %]</option>
-              [% FOR b IN bodies # Not body as 'body' may be on stash %]
-                <option value="[% b.id %]">[% b.name | html ~%]
-                    [% IF NOT b.area_count %] [% loc('(no longer exists)') %][% END ~%]
-                </option>
-              [% END %]
-            </select>
-        </div>
-      [% END %]
-        <div class="dashboard-search__submit">
-            <input type="submit" value="">
+        <div class="dashboard-search-wrapper">
+          <div class="dashboard-search__input">
+              <select id="ward" name="ward" class="js-autocomplete">
+                  <option value="Upiši naziv ulice ili mjesto">[% loc('Pick your ward') %]</option>
+                [% FOR child IN children.values.sort('name') %]
+                  <option>[% child.name | html ~%]</option>
+                [% END %]
+              </select>
+          </div>
+          <a class="location-link" href="[% c.uri_for('/around', link_params) | html %]" id="geolocate_link" tabindex="0" aria-label="use my location"><span class="location-icon"></span>[% loc('Use my current location') %]</a>
+        [% ELSE %]
+          <!-- <label for="body">[% loc('Pick your council') %]</label> -->
+          <div class="dashboard-search__input">
+              <select id="body" name="body" class="js-autocomplete">
+                  <option value="Upiši naziv ulice ili mjesto">[% loc('Pick your council') %]</option>
+                [% FOR b IN bodies # Not body as 'body' may be on stash %]
+                  <option value="[% b.id %]">[% b.name | html ~%]
+                      [% IF NOT b.area_count %] [% loc('(no longer exists)') %][% END ~%]
+                  </option>
+                [% END %]
+              </select>
+          </div>
+        [% END %]
+          <div class="dashboard-search__submit">
+              <input type="submit" value="">
+          </div>
         </div>
     </form>
   </div>

diff --git a/web/cobrands/popravitodev/base.scss b/web/cobrands/popravitodev/base.scss
@@ -1,3 +1,4 @@
+//MOBILE STYLE
 @import "./_colours";
 
 $body-font: 'Open Sans';
@@ -2485,3 +2486,10 @@ label[for="form_may_show_name"] {
 fieldset {
     border: none;
 }
+
+// /reports page
+
+.main-reports {
+    padding: 2.5rem;
+}
+
diff --git a/web/cobrands/popravitodev/layout.scss b/web/cobrands/popravitodev/layout.scss
@@ -1,3 +1,4 @@
+//DESKTOP STYLE
 @import "./_colours";
 
 $body-font: 'Open Sans';
@@ -1099,7 +1100,7 @@ fieldset {
 // REPORTS
 
 .main-reports {
- padding: 2.5rem;
+ padding: 2.5rem 7.5rem;
 }
 
 .dashboard-row-grid {
@@ -1126,6 +1127,10 @@ fieldset {
     border-top: 2px solid black;
     max-width: 30%;
     border-bottom: 0;
+
+    h2 {
+        text-align: center;
+    }
 }
 
 .dashboard-reports-smaller {
@@ -1143,6 +1148,7 @@ fieldset {
     position: absolute;
     max-width: 723px;
     max-height: 361px;
+    bottom: 8rem;
 }
 
 .dashboard-sparklines {
@@ -1178,7 +1184,7 @@ fieldset {
 
 .dashboard-search {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: space-between;
     background-color: #E5E1FE;
     padding: 1rem 10rem;
@@ -1188,9 +1194,8 @@ fieldset {
         font-size: 2.2rem;
     }
 
-    .dashboard-search__input {
-        flex: 1;
-        text-align: center;
+    .dashboard-search-wrapper {
+        display: flex;
     }
 }
 
@@ -1242,12 +1247,13 @@ fieldset {
 
     .label-container {
         display: flex;
-        flex-direction: column;
+        //flex-direction: column;
         text-align: right;
         justify-content: end;
 
         .label:first-child {
             margin-bottom: 2rem;
+            margin-right: 2rem;
         }
 
         .label {