From bbcf23357ae8a75e1885daffc429a5e96f8a5f7d Mon Sep 17 00:00:00 2001
From: rstular <rok@stular.eu>
Date: Thu, 14 May 2020 20:53:47 +0200
Subject: Styling fixes in about and settings

---
 css/styles.css             | 11 ++++++++++
 pages-src/about.bvr        | 52 +++++++++++++++++++++++++-------------------
 pages-src/misc/version.bvr |  1 +
 pages-src/settings.bvr     | 26 ++++++++++++++--------
 pages/about.html           | 54 +++++++++++++++++++++++++++-------------------
 pages/settings.html        | 26 ++++++++++++++--------
 6 files changed, 108 insertions(+), 62 deletions(-)
 create mode 100644 pages-src/misc/version.bvr

diff --git a/css/styles.css b/css/styles.css
index c728463..bea7be0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -189,3 +189,14 @@ a.collection-item {
 .fab-new-message {
     background-color: var(--color-secondary) !important;
 }
+
+/* About right buttons */
+.about-button-box {
+    display: flex;
+    flex-direction: row;
+}
+
+.about-button-box > * {
+    margin-left: 5px;
+    margin-right: 5px;
+}
\ No newline at end of file
diff --git a/pages-src/about.bvr b/pages-src/about.bvr
index 7558a10..0830b9f 100644
--- a/pages-src/about.bvr
+++ b/pages-src/about.bvr
@@ -48,9 +48,11 @@
     <div class="container">
         <div class="row">
             <div class="col s12">
-                <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
+                <h3>
+                    <b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h5 class="subheader"><x-su>version</x-su> 1.0.13-beta</h5>
+                <!-- One day in the future we may have sw cache version covered by this as well -->
+                <h5 class="subheader"><x-su>version</x-su> <@?i version@></h5>
             </div>
         </div>
         <div class="row">
@@ -59,29 +61,35 @@
                     <li class="collection-header">
                         <h5><x-su>authors</x-su></h5>
                     </li>
-                    <li class="collection-item avatar">
+                    <li class="valign-wrapper collection-item avatar">
                         <img src="/img/avatars/rstular.png" class="circle">
                         <span class="title about-text">Rok Štular</span>
-			&nbsp;&nbsp;&nbsp;&nbsp; <!-- technology -->
-			<a href="messaging.html#Rok Štular" class="btn waves-effect waves-light" type="button">
-                            <i class="material-icons">message</i>
-                        </a>
-                        <a target="_blank" href="https://instagram.com/rstular/"
-                            class="secondary-content btn-floating btn-medium waves-effect waves-light button-theme-gimb"><i
-                                class="fab fa-instagram"></i></a>
+                        
+                        <div class="secondary-content about-button-box">
+                            <a href="messaging.html#Rok Štular" class="btn-floating btn-medium waves-effect waves-light button-theme-gimb" type="button">
+                                <i class="material-icons">message</i>
+                            </a>
+                            <a target="_blank" href="https://instagram.com/rstular/"
+                                class="btn-floating btn-medium waves-effect waves-light button-theme-gimb">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
+                            
                     </li>
 
-                    <li class="collection-item avatar">
+                    <li class="valign-wrapper collection-item avatar">
                         <img src="/img/avatars/asijanec.png" class="circle">
                         <span class="title about-text">Anton Luka Šijanec</span>
-                        <a target="_blank" href="https://instagram.com/asijanec/"
-                            class="secondary-content btn-floating btn-medium waves-effect waves-light button-theme-gimb"><i
-                                class="fab fa-instagram"></i></a>
-			</a>
-			&nbsp;&nbsp;&nbsp;&nbsp; <!-- technology -->
-			<a href="messaging.html#Anton Luka Šijanec" class="btn waves-effect waves-light" type="button">
-                            <i class="material-icons">message</i>
-                        </a>
+
+                        <div class="secondary-content about-button-box">
+                            <a href="messaging.html#Anton Luka Šijanec" class="btn-floating btn-medium waves-effect waves-light button-theme-gimb" type="button">
+                                <i class="material-icons">message</i>
+                            </a>
+                            <a target="_blank" href="https://instagram.com/rstular/"
+                                class="btn-floating btn-medium waves-effect waves-light button-theme-gimb">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -92,7 +100,7 @@
                     <li class="collection-header">
                         <h5><x-su>translatorsForThisLanguage</x-su> - <x-su>miscTranslationLanguage</x-su></h5>
                     </li>
-                    <li class="collection-item avatar">
+                    <li class="collection-item">
                         <span class="title about-text"><x-su>miscTranslationAuthors</x-su></span>
                     </li>
                 </ul>
@@ -105,8 +113,8 @@
                     <a href="/pages/tos.html" class="collection-item"><x-su>theToS</x-su></a>
                     <a href="/pages/privacypolicy.html" class="collection-item"><x-su>thePrivacyPolicy</x-su></a>
                     <a href="https://instagram.com/beziapp/" target="_blank" class="collection-item">
-											<x-su>reportABug</x-su> / <x-su>sendASuggestion</x-su> (<x-su>instagram></x-su>: @beziapp)
-										</a>
+						<x-su>reportABug</x-su> / <x-su>sendASuggestion</x-su> (<x-su>instagram</x-su>: @beziapp)
+					</a>
                 </div>
             </div>
         </div>
diff --git a/pages-src/misc/version.bvr b/pages-src/misc/version.bvr
new file mode 100644
index 0000000..e892a4f
--- /dev/null
+++ b/pages-src/misc/version.bvr
@@ -0,0 +1 @@
+1.0.13-beta
\ No newline at end of file
diff --git a/pages-src/settings.bvr b/pages-src/settings.bvr
index 130def1..ebe8906 100644
--- a/pages-src/settings.bvr
+++ b/pages-src/settings.bvr
@@ -50,20 +50,28 @@
             <div class="col s12">
                 <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h5 class="subheader"><x-su>settings</x-su></h5>
+                <h4 class="subheader"><x-su>settings</x-su></h4>
             </div>
         </div>
         <div class="row">
+            <h5><x-su>language</x-su></h5>
             <div class="col s12">
-                <ul class="collection with-header">
-                    <li class="collection-header">
-                        <h5><x-su>language</x-su></h5>
+                <ul class="collection">
+                    <li data-language="sl" class="collection-item settings-language-selector">
+                        <div>
+                            Slovenščina
+                            <a href="#!" class="secondary-content">
+                                <img src="/img/flags/sl.svg" />
+                            </a>
+                        </div>
                     </li>
-                    <li data-language="sl" class="settings-language-selector collection-item waves-effect">
-                        <span class="title about-text">Slovenščina</span>
-                    </li>
-                    <li date-language="en" class="collection-item waves-effect">
-                        <span class="title about-text">English</span>
+                    <li data-language="en" class="collection-item settings-language-selector">
+                        <div>
+                            English
+                            <a href="#!" class="secondary-content">
+                                <img src="/img/flags/en.svg" />
+                            </a>
+                        </div>
                     </li>
 										<!--
 	                    <li class="collection-item waves-effect">
diff --git a/pages/about.html b/pages/about.html
index 8d18a85..08c9c47 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -70,9 +70,13 @@
     <div class="container">
         <div class="row">
             <div class="col s12">
-                <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
+                <h3>
+                    <b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h5 class="subheader"><x-su>version</x-su> 1.0.13-beta</h5>
+                <!-- One day in the future we may have sw cache version covered by this as well -->
+                <h5 class="subheader"><x-su>version</x-su> 
+1.0.13-bet
+</h5>
             </div>
         </div>
         <div class="row">
@@ -81,29 +85,35 @@
                     <li class="collection-header">
                         <h5><x-su>authors</x-su></h5>
                     </li>
-                    <li class="collection-item avatar">
+                    <li class="valign-wrapper collection-item avatar">
                         <img src="/img/avatars/rstular.png" class="circle">
                         <span class="title about-text">Rok Štular</span>
-			&nbsp;&nbsp;&nbsp;&nbsp; <!-- technology -->
-			<a href="messaging.html#Rok Štular" class="btn waves-effect waves-light" type="button">
-                            <i class="material-icons">message</i>
-                        </a>
-                        <a target="_blank" href="https://instagram.com/rstular/"
-                            class="secondary-content btn-floating btn-medium waves-effect waves-light button-theme-gimb"><i
-                                class="fab fa-instagram"></i></a>
+                        
+                        <div class="secondary-content about-button-box">
+                            <a href="messaging.html#Rok Štular" class="btn-floating btn-medium waves-effect waves-light button-theme-gimb" type="button">
+                                <i class="material-icons">message</i>
+                            </a>
+                            <a target="_blank" href="https://instagram.com/rstular/"
+                                class="btn-floating btn-medium waves-effect waves-light button-theme-gimb">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
+                            
                     </li>
 
-                    <li class="collection-item avatar">
+                    <li class="valign-wrapper collection-item avatar">
                         <img src="/img/avatars/asijanec.png" class="circle">
                         <span class="title about-text">Anton Luka Šijanec</span>
-                        <a target="_blank" href="https://instagram.com/asijanec/"
-                            class="secondary-content btn-floating btn-medium waves-effect waves-light button-theme-gimb"><i
-                                class="fab fa-instagram"></i></a>
-			</a>
-			&nbsp;&nbsp;&nbsp;&nbsp; <!-- technology -->
-			<a href="messaging.html#Anton Luka Šijanec" class="btn waves-effect waves-light" type="button">
-                            <i class="material-icons">message</i>
-                        </a>
+
+                        <div class="secondary-content about-button-box">
+                            <a href="messaging.html#Anton Luka Šijanec" class="btn-floating btn-medium waves-effect waves-light button-theme-gimb" type="button">
+                                <i class="material-icons">message</i>
+                            </a>
+                            <a target="_blank" href="https://instagram.com/rstular/"
+                                class="btn-floating btn-medium waves-effect waves-light button-theme-gimb">
+                                <i class="fab fa-instagram"></i>
+                            </a>
+                        </div>
                     </li>
                 </ul>
             </div>
@@ -114,7 +124,7 @@
                     <li class="collection-header">
                         <h5><x-su>translatorsForThisLanguage</x-su> - <x-su>miscTranslationLanguage</x-su></h5>
                     </li>
-                    <li class="collection-item avatar">
+                    <li class="collection-item">
                         <span class="title about-text"><x-su>miscTranslationAuthors</x-su></span>
                     </li>
                 </ul>
@@ -127,8 +137,8 @@
                     <a href="/pages/tos.html" class="collection-item"><x-su>theToS</x-su></a>
                     <a href="/pages/privacypolicy.html" class="collection-item"><x-su>thePrivacyPolicy</x-su></a>
                     <a href="https://instagram.com/beziapp/" target="_blank" class="collection-item">
-											<x-su>reportABug</x-su> / <x-su>sendASuggestion</x-su> (<x-su>instagram></x-su>: @beziapp)
-										</a>
+						<x-su>reportABug</x-su> / <x-su>sendASuggestion</x-su> (<x-su>instagram</x-su>: @beziapp)
+					</a>
                 </div>
             </div>
         </div>
diff --git a/pages/settings.html b/pages/settings.html
index ff667a8..ca18ecc 100644
--- a/pages/settings.html
+++ b/pages/settings.html
@@ -72,20 +72,28 @@
             <div class="col s12">
                 <h3><b class="title-secondary">Beži</b><span class="title-primary">App</span>
                 </h3>
-                <h5 class="subheader"><x-su>settings</x-su></h5>
+                <h4 class="subheader"><x-su>settings</x-su></h4>
             </div>
         </div>
         <div class="row">
+            <h5><x-su>language</x-su></h5>
             <div class="col s12">
-                <ul class="collection with-header">
-                    <li class="collection-header">
-                        <h5><x-su>language</x-su></h5>
+                <ul class="collection">
+                    <li data-language="sl" class="collection-item settings-language-selector">
+                        <div>
+                            Slovenščina
+                            <a href="#!" class="secondary-content">
+                                <img src="/img/flags/sl.svg" />
+                            </a>
+                        </div>
                     </li>
-                    <li data-language="sl" class="settings-language-selector collection-item waves-effect">
-                        <span class="title about-text">Slovenščina</span>
-                    </li>
-                    <li date-language="en" class="collection-item waves-effect">
-                        <span class="title about-text">English</span>
+                    <li data-language="en" class="collection-item settings-language-selector">
+                        <div>
+                            English
+                            <a href="#!" class="secondary-content">
+                                <img src="/img/flags/en.svg" />
+                            </a>
+                        </div>
                     </li>
 										<!--
 	                    <li class="collection-item waves-effect">
-- 
cgit v1.2.3