From fa56a2774a036c3657e35cecd5c918a63ee04ad8 Mon Sep 17 00:00:00 2001
From: yashhash2 <yashksingh790@gmail.com>
Date: Sun, 15 Dec 2024 01:09:55 +0530
Subject: [PATCH 1/3] Your commit message

---
 .../src/views/LibraryPage/OtherLibraries.vue  | 189 ++++++++++++++++--
 1 file changed, 167 insertions(+), 22 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index a7021bf2465..b0a2b325a76 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -4,6 +4,7 @@
     <KGrid
       gutter="0"
       class="grid"
+      style="margin-bottom:-25px ;"
     >
       <KGridItem
         :layout12="{ span: 6 }"
@@ -13,13 +14,8 @@
         <h1 :style="{ marginLeft: '-8px' }">
           {{ injectedtr('otherLibraries') }}
         </h1>
-      </KGridItem>
-      <KGridItem
-        :layout12="{ span: 6 }"
-        :layout8="{ span: 4 }"
-        :layout4="{ span: 4 }"
-      >
-        <div class="sync-status">
+     
+        <div class="sync-status" >
           <span
             v-show="searchingOtherLibraries"
             data-test="searching"
@@ -43,7 +39,7 @@
                 icon="wifi"
                 class="wifi-svg"
               />
-            </span>
+            </span> 
             &nbsp;&nbsp;
             <span data-test="showing-all-label">{{ injectedtr('showingAllLibraries') }}</span>
             &nbsp;&nbsp;
@@ -55,17 +51,23 @@
               />
             </span>
           </span>
+          <div class="a" v-show="!searchingOtherLibraries && !devicesWithChannelsExist" >
           <span
-            v-show="!searchingOtherLibraries && !devicesWithChannelsExist"
+            
             data-test="no-other"
-          >
-            <span>
-              <KIcon icon="disconnected" />
-            </span>
+            
+          > <div  >
+            <span >
+              <KIcon class="disco"  icon="disconnected" />
+            </span >
+          </div>
             &nbsp;&nbsp;
-            <span data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
+            <div class="b">
+            <span   data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
+          </div>
           </span>
         </div>
+        </div>
       </KGridItem>
     </KGrid>
 
@@ -233,16 +235,20 @@
 
 <style lang="scss" scoped>
 
-  .sync-status {
-    display: flex;
-    justify-content: flex-end;
-    margin: 30px 0 10px;
+.sync-status {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+  margin-left: -300px;
+ 
+  span {
 
-    span {
-      display: inline-flex;
-      vertical-align: bottom;
-    }
+   
+    display: inline-block;
+    vertical-align: bottom;
+    margin-left: -8px;
   }
+}
 
   .wifi-svg {
     top: 0;
@@ -251,10 +257,149 @@
 
   .grid {
     margin: 8px;
+    
   }
 
   .other-libraries-grid {
     margin-left: 0.75em;
   }
 
+@media screen  and (max-width: 600px)  {
+  .sync-status {
+  display: flex;
+  justify-content: flex-end;
+  margin-top:-20px ;
+   margin-left: 0px;
+   padding-left: 10px;
+   margin-bottom: 25px;
+   min-width: 400px;
+   max-width: 400px;
+   
+   .a {
+    display: flex; // Use flex to align items if needed
+    align-items: center; // Center items vertically
+    margin-top: -5px; // Add some margin for spacing
+     margin-left: 100px; 
+     margin-right: 13px;
+    }
+    .disco {
+      margin-left: 1000px;
+      margin-right: -640px; // Space between icon and text
+    }
+
+    .b {
+      margin-left: 500px;
+      padding-left: 00px;
+      min-width: 200px;
+    }
+
+   span {
+      margin-left: -191px;
+      margin-bottom:10px ;
+      display: inline-flex;
+      word-wrap: break-word;
+
+      
+      vertical-align: bottom;
+      margin-top: 10px;
+    }
+  }
+  .wifi-svg {
+    top: 0;
+    transform: scale(1.5);
+    margin-left: -213px;
+  }
+}
+@media screen and (min-width: 600px) and (max-width:1100px)  {
+  .sync-status {
+  display: flex;
+  justify-content: flex-end;
+  margin-top:-20px ;
+   margin-left: 0px;
+   padding-left: 10px;
+   margin-bottom: 25px;
+   min-width: 400px;
+
+   .a {
+    display: flex; // Use flex to align items if needed
+    align-items: center; // Center items vertically
+    margin-top: -5px; // Add some margin for spacing
+     margin-left: 100px; 
+     margin-right: 13px;
+    }
+    .disco {
+      margin-left: 1000px;
+      margin-right: -640px; // Space between icon and text
+    }
+
+    .b {
+      margin-left: 500px;
+      padding-left: 00px;
+      min-width: 200px;
+    }
+
+    span {
+      margin-left: -190px;
+      margin-bottom:10px ;
+      display: inline-flex;
+      
+      
+      vertical-align: bottom;
+      margin-top: 10px;
+    }
+  }
+  .wifi-svg {
+    top: 0;
+    transform: scale(1.5);
+    margin-left: -160px;
+  }
+}
+
+@media screen and (min-width: 1100px)  {
+  .sync-status {
+  display: flex;
+  justify-content: flex-end;
+  margin-top:-20px ;
+   margin-left: 0px;
+   padding-left: 10px;
+   margin-bottom: 25px;
+   min-width: 400px;
+    span {
+      margin-left: -220px;
+      margin-bottom:10px ;
+      display: inline-flex;
+      padding-left: -50px;
+      
+      vertical-align: bottom;
+      margin-top: 10px;
+    }
+    .a {
+    display: flex; // Use flex to align items if needed
+    align-items: center; // Center items vertically
+    margin-top: -5px; // Add some margin for spacing
+     margin-left: 100px; 
+     margin-right: 50px;
+    
+    }
+    .disco {
+      margin-left: 1000px;
+      margin-right: -610px; // Space between icon and text
+    
+    }
+
+    
+    .b {
+      margin-left: 500px;
+      padding-left: 00px;
+      min-width: 200px;
+    }
+  }
+  .wifi-svg {
+    top: 0;
+    transform: scale(1.5);
+    margin-left: -140px;
+  }
+  
+}
+
 </style>

From a62b93db1a3f258b157ae95c961de7466b0e1e34 Mon Sep 17 00:00:00 2001
From: yashhash2 <yashksingh790@gmail.com>
Date: Wed, 18 Dec 2024 01:00:39 +0530
Subject: [PATCH 2/3] Your commit message

---
 .../src/views/LibraryPage/OtherLibraries.vue  | 117 ++++++------------
 1 file changed, 38 insertions(+), 79 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index b0a2b325a76..2c85cfdb2f2 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -238,14 +238,32 @@
 .sync-status {
   display: flex;
   justify-content: flex-end;
-  margin-top: 30px;
-  margin-left: -300px;
+  margin-top: -20px;
+  margin-left: 0px;
+  padding-left: 10px;
+  margin-bottom: 25px;
+  min-width: 400px;
  
-  span {
+  .a {
+    display: flex; 
+    align-items: center; 
+    margin-top: -5px; 
+     margin-left: 100px; }
+    
+  .b {
+      margin-left: 500px;
+      padding-left: 00px;
+      min-width: 200px;
+    }
+    .disco {
+      margin-left: 1000px;    
+    }
 
-   
-    display: inline-block;
+  span {
+    margin-bottom: 10px;
     vertical-align: bottom;
+    margin-top: 10px;
+    display: inline-flex;
     margin-left: -8px;
   }
 }
@@ -266,137 +284,78 @@
 
 @media screen  and (max-width: 600px)  {
   .sync-status {
-  display: flex;
-  justify-content: flex-end;
-  margin-top:-20px ;
-   margin-left: 0px;
-   padding-left: 10px;
-   margin-bottom: 25px;
-   min-width: 400px;
+  
    max-width: 400px;
    
    .a {
-    display: flex; // Use flex to align items if needed
-    align-items: center; // Center items vertically
-    margin-top: -5px; // Add some margin for spacing
-     margin-left: 100px; 
      margin-right: 13px;
     }
     .disco {
-      margin-left: 1000px;
-      margin-right: -640px; // Space between icon and text
+      margin-right: -640px; 
     }
 
-    .b {
-      margin-left: 500px;
-      padding-left: 00px;
-      min-width: 200px;
-    }
+   
 
    span {
       margin-left: -191px;
-      margin-bottom:10px ;
-      display: inline-flex;
       word-wrap: break-word;
 
       
-      vertical-align: bottom;
-      margin-top: 10px;
     }
   }
   .wifi-svg {
-    top: 0;
-    transform: scale(1.5);
+    
     margin-left: -213px;
   }
 }
 @media screen and (min-width: 600px) and (max-width:1100px)  {
   .sync-status {
-  display: flex;
-  justify-content: flex-end;
-  margin-top:-20px ;
-   margin-left: 0px;
-   padding-left: 10px;
-   margin-bottom: 25px;
-   min-width: 400px;
+ 
 
    .a {
-    display: flex; // Use flex to align items if needed
-    align-items: center; // Center items vertically
-    margin-top: -5px; // Add some margin for spacing
-     margin-left: 100px; 
+
      margin-right: 13px;
     }
     .disco {
-      margin-left: 1000px;
-      margin-right: -640px; // Space between icon and text
+      margin-right: -640px; 
     }
 
-    .b {
-      margin-left: 500px;
-      padding-left: 00px;
-      min-width: 200px;
-    }
 
     span {
       margin-left: -190px;
-      margin-bottom:10px ;
-      display: inline-flex;
-      
-      
-      vertical-align: bottom;
-      margin-top: 10px;
+   
     }
   }
   .wifi-svg {
-    top: 0;
-    transform: scale(1.5);
+   
     margin-left: -160px;
   }
 }
 
 @media screen and (min-width: 1100px)  {
   .sync-status {
-  display: flex;
-  justify-content: flex-end;
-  margin-top:-20px ;
-   margin-left: 0px;
-   padding-left: 10px;
-   margin-bottom: 25px;
-   min-width: 400px;
+ 
     span {
       margin-left: -220px;
-      margin-bottom:10px ;
-      display: inline-flex;
       padding-left: -50px;
       
-      vertical-align: bottom;
-      margin-top: 10px;
+      
     }
     .a {
-    display: flex; // Use flex to align items if needed
-    align-items: center; // Center items vertically
-    margin-top: -5px; // Add some margin for spacing
-     margin-left: 100px; 
+
      margin-right: 50px;
     
     }
     .disco {
-      margin-left: 1000px;
-      margin-right: -610px; // Space between icon and text
+      margin-right: -610px; 
     
     }
 
     
-    .b {
-      margin-left: 500px;
-      padding-left: 00px;
-      min-width: 200px;
-    }
+   
   }
   .wifi-svg {
-    top: 0;
-    transform: scale(1.5);
+   
     margin-left: -140px;
   }
   

From 48eaf0366de77bb480dd5fce726433932845707d Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 19 Dec 2024 17:08:38 +0000
Subject: [PATCH 3/3] [pre-commit.ci lite] apply automatic fixes

---
 .../src/views/LibraryPage/OtherLibraries.vue  | 206 +++++++++---------
 1 file changed, 97 insertions(+), 109 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index 2c85cfdb2f2..f2fc5705110 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -4,7 +4,7 @@
     <KGrid
       gutter="0"
       class="grid"
-      style="margin-bottom:-25px ;"
+      style="margin-bottom: -25px"
     >
       <KGridItem
         :layout12="{ span: 6 }"
@@ -14,8 +14,8 @@
         <h1 :style="{ marginLeft: '-8px' }">
           {{ injectedtr('otherLibraries') }}
         </h1>
-     
-        <div class="sync-status" >
+
+        <div class="sync-status">
           <span
             v-show="searchingOtherLibraries"
             data-test="searching"
@@ -39,7 +39,7 @@
                 icon="wifi"
                 class="wifi-svg"
               />
-            </span> 
+            </span>
             &nbsp;&nbsp;
             <span data-test="showing-all-label">{{ injectedtr('showingAllLibraries') }}</span>
             &nbsp;&nbsp;
@@ -51,22 +51,25 @@
               />
             </span>
           </span>
-          <div class="a" v-show="!searchingOtherLibraries && !devicesWithChannelsExist" >
-          <span
-            
-            data-test="no-other"
-            
-          > <div  >
-            <span >
-              <KIcon class="disco"  icon="disconnected" />
-            </span >
-          </div>
-            &nbsp;&nbsp;
-            <div class="b">
-            <span   data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
+          <div
+            v-show="!searchingOtherLibraries && !devicesWithChannelsExist"
+            class="a"
+          >
+            <span data-test="no-other">
+              <div>
+                <span>
+                  <KIcon
+                    class="disco"
+                    icon="disconnected"
+                  />
+                </span>
+              </div>
+              &nbsp;&nbsp;
+              <div class="b">
+                <span data-test="no-other-label">{{ injectedtr('noOtherLibraries') }}</span>
+              </div>
+            </span>
           </div>
-          </span>
-        </div>
         </div>
       </KGridItem>
     </KGrid>
@@ -235,38 +238,40 @@
 
 <style lang="scss" scoped>
 
-.sync-status {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -20px;
-  margin-left: 0px;
-  padding-left: 10px;
-  margin-bottom: 25px;
-  min-width: 400px;
- 
-  .a {
-    display: flex; 
-    align-items: center; 
-    margin-top: -5px; 
-     margin-left: 100px; }
-    
-  .b {
-      margin-left: 500px;
-      padding-left: 00px;
+  .sync-status {
+    display: flex;
+    justify-content: flex-end;
+    min-width: 400px;
+    padding-left: 10px;
+    margin-top: -20px;
+    margin-bottom: 25px;
+    margin-left: 0;
+
+    .a {
+      display: flex;
+      align-items: center;
+      margin-top: -5px;
+      margin-left: 100px;
+    }
+
+    .b {
       min-width: 200px;
+      padding-left: 00;
+      margin-left: 500px;
     }
+
     .disco {
-      margin-left: 1000px;    
+      margin-left: 1000px;
     }
 
-  span {
-    margin-bottom: 10px;
-    vertical-align: bottom;
-    margin-top: 10px;
-    display: inline-flex;
-    margin-left: -8px;
+    span {
+      display: inline-flex;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      margin-left: -8px;
+      vertical-align: bottom;
+    }
   }
-}
 
   .wifi-svg {
     top: 0;
@@ -275,90 +280,73 @@
 
   .grid {
     margin: 8px;
-    
   }
 
   .other-libraries-grid {
     margin-left: 0.75em;
   }
 
-@media screen  and (max-width: 600px)  {
-  .sync-status {
-  
-   max-width: 400px;
-   
-   .a {
-     margin-right: 13px;
-    }
-    .disco {
-      margin-right: -640px; 
-    }
+  @media screen and (max-width: 600px) {
+    .sync-status {
+      max-width: 400px;
 
-   
+      .a {
+        margin-right: 13px;
+      }
 
-   span {
-      margin-left: -191px;
-      word-wrap: break-word;
+      .disco {
+        margin-right: -640px;
+      }
 
-      
+      span {
+        margin-left: -191px;
+        word-wrap: break-word;
+      }
     }
-  }
-  .wifi-svg {
-    
-    margin-left: -213px;
-  }
-}
-@media screen and (min-width: 600px) and (max-width:1100px)  {
-  .sync-status {
- 
-
-   .a {
 
-     margin-right: 13px;
+    .wifi-svg {
+      margin-left: -213px;
     }
-    .disco {
-      margin-right: -640px; 
+  }
+  @media screen and (min-width: 600px) and (max-width: 1100px) {
+    .sync-status {
+      .a {
+        margin-right: 13px;
+      }
+
+      .disco {
+        margin-right: -640px;
+      }
+
+      span {
+        margin-left: -190px;
+      }
     }
 
-
-    span {
-      margin-left: -190px;
-   
+    .wifi-svg {
+      margin-left: -160px;
     }
   }
-  .wifi-svg {
-   
-    margin-left: -160px;
-  }
-}
 
-@media screen and (min-width: 1100px)  {
-  .sync-status {
- 
-    span {
-      margin-left: -220px;
-      padding-left: -50px;
-      
-      
-    }
-    .a {
+  @media screen and (min-width: 1100px) {
+    .sync-status {
+      span {
+        padding-left: -50px;
+        margin-left: -220px;
+      }
 
-     margin-right: 50px;
-    
-    }
-    .disco {
-      margin-right: -610px; 
-    
+      .a {
+        margin-right: 50px;
+      }
+
+      .disco {
+        margin-right: -610px;
+      }
     }
 
-    
-   
-  }
-  .wifi-svg {
-   
-    margin-left: -140px;
+    .wifi-svg {
+      margin-left: -140px;
+    }
   }
-  
-}
 
 </style>