Enhance frontend Dockerfile and styles; add fonts directory, update C…

…SS for login and search pages, and improve search layout and checkbox styles
EliasDeHondt · Jan 3, 2025 · 02191f9 · 02191f9
1 parent c54003a
commit 02191f9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 17 deletions.
diff --git a/App/Frontend/Dockerfile b/App/Frontend/Dockerfile
@@ -3,17 +3,18 @@
 # @since 01/01/2025             #
 #################################
 # Frontend build
-# Stage 1:
 FROM nginx:alpine
 
 LABEL maintainer="K10s Open Source Team"
 LABEL version="1.0"
 LABEL description="This is the frontend image for the app."
+LABEL org.opencontainers.image.description="This is the frontend image for the app."
 
 COPY ./nginx.conf /etc/nginx/nginx.conf
 COPY ./default.conf /etc/nginx/conf.d/default.conf
 
 COPY ./css /usr/share/nginx/html/css
+COPY ./fonts /usr/share/nginx/html/fonts
 COPY ./images /usr/share/nginx/html/images
 COPY ./includes /usr/share/nginx/html/includes
 COPY ./js /usr/share/nginx/html/js

diff --git a/App/Frontend/css/login.css b/App/Frontend/css/login.css
@@ -6,6 +6,7 @@
 @import url('/App/Frontend/css/global.css');
 
 .login-body {
+    background-color: var(--background);
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/App/Frontend/css/search.css b/App/Frontend/css/search.css
@@ -13,18 +13,10 @@
 .search-body {
     display: grid;
     grid-template-areas:
-        'nav header header header header'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main'
-        'nav main main main main';
-    grid-template-columns: 1fr 3fr 3fr 3fr;
+        'nav header'
+        'nav main';
+    grid-template-columns: 1fr 9fr;
+    grid-template-rows: 1fr 9fr;
     gap: 16px;
     padding: 10px;
     height: 95vh;
@@ -64,6 +56,21 @@
 
 .search-header-article input[type="checkbox"] {
     margin: 10px;
+    width: 20px;
+    height: 20px;
+    accent-color: var(--primary);
+    border: 2px solid var(--primary);
+    border-radius: 4px;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.search-header-article input[type="checkbox"]:checked {
+    background-color: var(--primary);
+    border-color: var(--secondary);
+}
+
+.search-header-article label {
+    font-size: 1.5rem;
 }
 
 .search-header-article button {

diff --git a/App/Frontend/pages/search.html b/App/Frontend/pages/search.html
@@ -31,16 +31,12 @@
                     <button id="search-button">Search</button>
                 </article>
                 <article class="search-header-article">
-                    <div>
                         <label><input type="checkbox" id="search-filter-option-1">Nodes</label>
                         <label><input type="checkbox" id="search-filter-option-2">Pods</label>
                         <label><input type="checkbox" id="search-filter-option-3">Services</label>
-                    </div>
-                    <div>
                         <label><input type="checkbox" id="search-filter-option-4">Deployments</label>
                         <label><input type="checkbox" id="search-filter-option-5">ConfigMaps</label>
                         <label><input type="checkbox" id="search-filter-option-6">Secrets</label>
-                    </div>
                 </article>
             </section>
         </header>