Allow language selection (#191)

* Add dropdown for language

* Use vue-i18n to translate strings

* Tweak header styling

* Add Chinese languages in

* Typo

* Get language from browser (#193)

* adaptive system language

* Modify the adaptive system language

* Remove dead code

* Delete lang default values

* Move browser language detection to util

* Remove todos

* Fix global PHP dropdown

Co-authored-by: 墨娘 <61287199+moniang@users.noreply.github.com>

src/nginxconfig/scss/_header.scss

@@ -0,0 +1,47 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.header {
+  padding: ($margin * 2) $margin ($margin * 1.5);
+
+  @media (min-width: $breakpoint) {
+    padding: ($margin * 3.75) 0 ($margin * .5);
+  }
+
+  .container {
+    form {
+      .input-container {
+        margin: 0;
+      }
+
+      .buttons {
+        > * {
+          margin: 0 0 1rem;
+        }
+      }
+    }
+  }
+}

src/nginxconfig/scss/_vue-select.scss

@@ -36,8 +36,15 @@ THE SOFTWARE.
       box-shadow: 0 0 2px rgba($success, .5);
 
       .vs__selected {
+        height: $height;
+        position: unset;
         top: .75em;
       }
+
+      .vs__search {
+        position: absolute;
+        width: 100%;
+      }
     }
   }
 
@@ -60,6 +67,17 @@ THE SOFTWARE.
         margin: 0;
         padding: 0;
         transition: opacity $transition;
+
+        .has-icon {
+          align-items: center;
+          display: flex;
+
+          .icon {
+            color: $dark-grey;
+            font-size: 1.25rem;
+            margin: 0 .5rem 0 0;
+          }
+        }
       }
 
       .vs__search {
@@ -76,7 +94,13 @@ THE SOFTWARE.
     }
 
     .vs__actions {
-      padding: 0;
+      padding: 0 0 0 .25rem;
+    }
+  }
+
+  .vs__dropdown-menu {
+    .vs__dropdown-option {
+      white-space: normal;
     }
   }
 }

src/nginxconfig/scss/style.scss

@@ -41,6 +41,7 @@ $highlight: #f2c94c;
   $vs-state-active-bg: $primary;
   @import "~vue-select/src/scss/vue-select";
 
+  @import "header";
   @import "tabs";
   @import "panel";
   @import "fields";