feat: Aggiunta gestione bandiere cambio lingua

polilluminato · polilluminato · commit 780052b2d122 · 2020-04-03T11:27:27.000+02:00
Ho ristrutturato la parte alta della pagina per aggiungere due bottoni per il cambio della lingua
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,41 @@
+.colonna_titolo {
+    padding-top: 1.5rem;
+}
+.col-switch-lingua {
+    display: flex;
+    flex-direction: row;
+}
+.col-lingua {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.col-lingua .btn-lingua {
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    align-items: center;
+    margin-right: 20px;
+    border: 1px solid #acacac;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+.col-lingua .btn-lingua img {
+    width: 25px;
+    height: 25px;
+    margin-right: 10px;
+}
+.col-lingua .btn-lingua span {
+    font-size: 20px;
+}
+.col-lingua .btn-lingua.active {
+    background-color: #08f;
+}
+.col-lingua .btn-lingua.active span{
+    font-weight: 600;
+    color: #fff;
+}
+
 .singola_sezione {
     margin-top: 2.5rem;
     box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);
diff --git a/index.html b/index.html
@@ -33,17 +33,35 @@
 
 <body>
 
-    <section style="margin-top: 5rem; margin-bottom: 2rem;">
+    <section style="margin-top: 2rem;">
         <div class="container is-fluid">
             <div class="columns">
                 <div class="column is-1">
-                    <figure class="image is-128x128">
+                    <figure class="image is-96x96">
                         <img src="img/icona.png">
                     </figure>
                 </div>
-                <div class="column is-1"></div>
                 <div class="column colonna_titolo">
                     <h1 class="title is-1">COVID-19 Tracker ITA</h1>
+                </div>
+                <div class="column is-2 col-switch-lingua">
+                    <div class="col-lingua">
+                        <div class="btn-lingua active" data-lang="it">
+                            <img src="img/flags/it.png">
+                            <span>IT</span>
+                        </div>
+                    </div>
+                    <div class="col-lingua">
+                        <div class="btn-lingua" data-lang="en">
+                            <img src="img/flags/en.png">
+                            <span>EN</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
                     <h2 class="subtitle is-4" style="margin-bottom:.5rem;">
                         Dati sull'emergenza del COVID-19 in Italia messi a disposizione sulla pagina GitHub <a href="https://github.com/pcm-dpc/COVID-19">COVID-19</a> dal Dipartimento della Protezione Civile e aggiornati al <b id="data_aggiornamento"></b>
                     </h2>
