Making language selection list alphabetical

CruGlobal · Nov 13, 2023 · 7863f1f · 7863f1f
1 parent b12a89b
commit 7863f1f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css
@@ -29,6 +29,7 @@
   height: 100%;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 #homeHeader > .bs-container > .language-switcher > div.selector > img {
@@ -112,10 +113,9 @@
 #languageSwitchModal > div.modal-content > div.modal-close {
   width: 100%;
   height: 36px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
+  display: block;
+  text-align: right;
+  margin-top: 10px;
 }
 
 #languageSwitchModal > div.modal-content > div.modal-close > i {
@@ -127,24 +127,25 @@
   font-weight: 400;
 }
 
-#languageSwitchModal > div.modal-content > div.languages-grid {
-  height: calc(100% - 48px);
+#languageSwitchModal > div.modal-content > ul.languages-grid {
   width: 100%;
   overflow-y: scroll;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
+  columns: 4;
+  column-gap: 10px;
+  margin: 5px 0 0 0;
+  padding: 0 15px 5px 5px;
 }
 
-#languageSwitchModal > div.modal-content > div.languages-grid > div.language {
-  width: calc(25% - 8px);
+#languageSwitchModal > div.modal-content > ul.languages-grid > li.language {
   height: 36px;
-  margin: 4px 4px;
+  width: 100%;
+  display: inline-flex;
+  margin: 4px;
+  padding: 0 8px;
+  align-items: center;
   font-size: 13px;
-  color: #666666;
-  display: flex;
+  color: #666;
   align-items: center;
-  padding: 0 8px;
   white-space: nowrap;
   overflow: hidden;
   border-radius: 4px;
@@ -154,11 +155,26 @@
 
 #languageSwitchModal
   > div.modal-content
-  > div.languages-grid
-  > div.language:hover {
+  > ul.languages-grid
+  > li.language:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
+#languageSwitchModal
+  > div.modal-content
+  > ul.languages-grid
+  > li.language:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+#languageSwitchModal > div.modal-content > div.modal-close > i:hover {
+  opacity: 0.4;
+}
+
+#languageSwitchModal > div.modal-content > div.modal-close > i:active {
+  opacity: 0.5;
+}
+
 /***** Responsive *****/
 @media (min-width: 576px) {
   #homeTools .bs-card {
@@ -173,8 +189,8 @@
     font-size: 14px;
   }
 
-  #languageSwitchModal > div.modal-content > div.languages-grid > div.language {
-    width: calc(50% - 8px);
+  #languageSwitchModal > div.modal-content > ul.languages-grid {
+    columns: 2;
   }
 }
 
@@ -206,7 +222,6 @@
     top: 0;
     bottom: 0;
     font-size: 14px;
-    cursor: pointer;
   }
 }
 @media screen and (min-width: 992px) {

diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -61,14 +61,14 @@ <h5 class="bs-card-title" dir="{{ dispLanguageDirection }}">
     <div class="modal-close">
       <i class="fas fa-times" (click)="onSwitchLanguage()"></i>
     </div>
-    <div class="languages-grid">
-      <div
+    <ul class="languages-grid">
+      <li
         class="language"
         *ngFor="let lang of availableLangs"
         (click)="onSelectLanguage(lang.code)"
       >
         {{ lang.name }}
-      </div>
-    </div>
+      </li>
+    </ul>
   </div>
 </div>