SS-1204 Improved styling of forms, navbar, public apps page

apps/forms/base.py

@@ -48,9 +48,14 @@ def _setup_form_fields(self):
     def _setup_form_helper(self):
         # Create a footer for submit form or cancel
         self.footer = Div(
-            Button("cancel", "Cancel", css_class="btn-danger", onclick="window.history.back()"),
+            Button(
+                "cancel",
+                "Cancel",
+                css_class="btn-outline-dark btn-outline-cancel me-2",
+                onclick="window.history.back()",
+            ),
             Submit("submit", "Submit"),
-            css_class="card-footer d-flex justify-content-between",
+            css_class="card-footer d-flex justify-content-end",
         )
         self.helper = FormHelper(self)
         self.helper.form_method = "post"

apps/forms/filemanager.py

@@ -14,9 +14,14 @@ def _setup_form_helper(self):
         super()._setup_form_helper()
 
         self.footer = Div(
-            Button("cancel", "Cancel", css_class="btn-danger", onclick="window.history.back()"),
+            Button(
+                "cancel",
+                "Cancel",
+                css_class="btn-outline-dark btn-outline-cancel me-2",
+                onclick="window.history.back()",
+            ),
             Submit("submit", "Activate", css_class="btn-profile text-dark"),
-            css_class="card-footer d-flex justify-content-between",
+            css_class="card-footer d-flex justify-content-end",
         )
         body = Div(
             Div(

static/css/serve-colors.css

@@ -26,6 +26,10 @@
     --serve-medium-grey: #a6a6a6;
     --serve-dark-grey: #3f3f3f;
 
+    --serve-yellow: #fffdab;
+    --serve-yellow-075: #fffdabb0;
+    --serve-yellow-050: #fffdab70;
+
     --scaleout-black: #191919;
     --scaleout-red: #E0746D;
     --scaleout-yellow: #EBD886;
@@ -150,3 +154,14 @@
 .text-red {
     color: var(--scaleout-red);
 }
+
+.bg-yellow {
+    background-color: var(--serve-yellow);
+}
+
+.bg-yellow-075 {
+    background-color: var(--serve-yellow-075);
+}
+.bg-yellow-050 {
+    background-color: var(--serve-yellow-050);
+}

static/css/serve-elements.css

@@ -51,6 +51,29 @@
     --bs-gradient: none;
 }
 
+.btn-outline-dark.btn-outline-cancel:hover {
+    background-color: #ffffff00;
+    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), .15) !important;
+    color: #222529;
+    outline-offset: -1px;
+    outline:2px solid #282a2e;
+}
+
+.btn-primary:hover {
+    outline-offset: -1px;
+    outline:2px solid var(--serve-dark-grey);
+}
+
+.btn-danger:hover {
+    outline-offset: -1px;
+    outline:2px solid #bb2d3b;
+}
+
+.btn-profile:hover {
+    outline-offset: -1px;
+    outline:2px solid var(--serve-lime);
+}
+
 /* serve button for scrolling to top */
 .btn-top {
     position: fixed;

static/css/serve-utilities.css

@@ -102,3 +102,92 @@ label.required::before {
     border: #e5626b!important;
     color: white!important;
 }
+
+.nav-link.serve-main-nav.active {
+    font-weight: bolder!important;
+    font-size: 1.1rem!important;
+}
+
+.nav-link.serve-main-nav.active:after {
+    width: 100%;
+}
+
+.nav-link.serve-main-nav:focus:after {
+    width: 100%;
+}
+
+.nav-link.serve-main-nav:hover {
+    font-weight: bolder!important;
+}
+
+.nav-item:after {
+    height: 50%!important;
+}
+
+@media screen and (min-width: 1200px) {
+    .nav-separator {
+        border-right:2px solid #e8eaea;
+        height:100%;
+        margin-right:1rem;
+    }
+}
+
+@media screen and (max-width: 1200px) {
+    .zero-padding {
+        padding-left: 0!important;
+        padding-right: 0!important;
+    }
+    .nav-separator {
+        display: none;
+}
+}
+
+.nav-separator {
+    border-right:2px solid #e8eaea;
+    margin-right:1rem;
+}
+
+.btn.active {
+    background: #a7c947!important;
+}
+
+.bg-gradient-dark {
+    background-image: linear-gradient(310deg, #141727, #3a416f);
+}
+
+.btn-outline-secondary {
+    --bs-btn-color: #8392ab;
+    --bs-btn-border-color: #8392ab;
+    --bs-btn-hover-color: #000;
+    --bs-btn-hover-bg: #8392ab;
+    --bs-btn-hover-border-color: #8392ab;
+    --bs-btn-focus-shadow-rgb: 131, 146, 171;
+    --bs-btn-active-color: #000;
+    --bs-btn-active-bg: #8392ab;
+    --bs-btn-active-border-color: #8392ab;
+    --bs-btn-active-shadow: none;
+    --bs-btn-disabled-color: #8392ab;
+    --bs-btn-disabled-bg: transparent;
+    --bs-btn-disabled-border-color: #8392ab;
+    --bs-gradient: none;
+}
+
+.wrong .bi-check {
+    display: none;
+}
+.good .bi-x {
+    display: none;
+}
+
+.bi-download {
+    -webkit-text-stroke: 0.5px;
+}
+
+.bi-code-slash {
+    -webkit-text-stroke: 0.5px;
+}
+
+.badge-grape {
+    background-color: var(--serve-grape-075)!important;
+    color: white!important;
+}

templates/common/app_card.html

@@ -2,10 +2,11 @@
 {% load custom_tags %}
 
                 <div class="card h-100 border-0 shadow">
-                    <div class="card-body d-flex flex-column m-1">
-                        <div class="col-12 d-flex flex-row pb-2 align-items-center">
-                            <div class="col-8 d-flex">
-                                <h5 class="card-title bg-white">{{ app.name }}</h5>
+                    <div class="card-header d-flex card-footer-text justify-content-between align-items-center">
+                        <div class="col-12 d-flex flex-row align-items-center">
+                            <div class="col-8 d-flex align-items-center">
+                                <h5 class="card-title fw-bold align-items-center m-0 me-1">{{ app.name }}</h5>
+                                <i data-bs-toggle="tooltip" data-bs-placement="top" data-bs-delay='{"show":"500", "hide":"0"}' title="Waiting" style="color:orange;{% if app.status_group == "success" %}display: none;{% endif %}" class="bi bi-circle-fill align-items-center mt-1"></i>
                             </div>
                             <div class="col-4 d-flex justify-content-end">
                                 {% static 'images/logos/apps/' as static_url %}
@@ -15,6 +16,8 @@ <h5 class="card-title bg-white">{{ app.name }}</h5>
                             </div>
                         </div>
 
+                    </div>
+                    <div class="card-body d-flex flex-column">
                         <div id="app-{{ app.id }}" class="card-text description-app">
                             <p>
                                 {% if app.description|length > 349 %}
@@ -26,13 +29,13 @@ <h5 class="card-title bg-white">{{ app.name }}</h5>
                             </p>
                             <ul class="list-unstyled">
                                 <li class="list-group-item row">
-                                    <div class="col-3"><span class="value-label">Owner:</span></div>
-                                    <div class="col-9">{{ app.owner.first_name }} {{ app.owner.last_name }}</div>
+                                    <div class="col-12"><span class="value-label fw-bold">Owner: </span>{{ app.owner.first_name }} {{ app.owner.last_name }}</div>
+                                    <div class="col-9"></div>
                                 </li>
                             </ul>
                         </div>
 
-                        <div class="row d-flex flex-column pb-4">
+                        <div class="row d-flex flex-column">
                             <div class="col-12">
                                 {% if request.session.app_tags|exists:app.id %}
                                 {% with app.tags.all as tags %}
@@ -71,44 +74,27 @@ <h5 class="card-title bg-white">{{ app.name }}</h5>
                                 {% endif %}
                             </div>
                         </div>
-                        <div class="row mt-auto align-items-center">
-                            <div class="col-8">
-                                {% if "Serve" in app.app.name or app.app.name == "Python Model Deployment" %}
-                                    <a class="btn btn-primary" onclick="copyClip('{{app.url}}')">Copy API Endpoint</a>
-                                {% else %}
-                                    <a title="Launch the app" rel="Link to launch the app" href="{{ app.url }}" target="_blank" class="btn btn-primary">Open</a>
-                                {% endif %}
-                                {% if app.app.slug in 'shinyapp,shinyproxyapp,dashapp,customapp,gradio,streamlit' %}
-                                {% if app.pvc == None %}
-                                <a title="Instructions for running the app locally" rel="Instructions for running the app locally" href="#" class="icon-external" data-bs-toggle="modal" data-bs-target="#dockerInfoModal" data-app-name="{{ app.name }}" data-app-image="{{ app.image }}" data-app-port="{{ app.port }}">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" fill="#6d5476" class="bi bi-cloud-arrow-down-fill mb-0" viewBox="0 0 16 14" style="vertical-align: -webkit-baseline-middle">
-                                        <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708"/>
-                                      </svg>
-                                </a>
-                                {% endif %}
-                                {% endif %}
-                                {% if app.source_code_url %}
-                                <a id="source-code-url" target="_blank" title="Source code of the app" rel="Link to the source code of the app" href="{{ app.source_code_url }}" class="icon-external">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#6d5476" class="bi bi-code-square" viewBox="0 0 16 16" style="vertical-align: -webkit-baseline-middle">
-                                        <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
-                                        <path d="M6.854 4.646a.5.5 0 0 1 0 .708L4.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0m2.292 0a.5.5 0 0 0 0 .708L11.793 8l-2.647 2.646a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708 0"/>
-                                      </svg>
-                                </a>
-                                {% endif %}
-                            </div>
-                            <div class="col-4 text-end">
-                                {% if app.status_group == "success" %}
-                                <span class="badge bg-success">Running</span>
-                                {% else %}
-                                <span class="badge bg-warning">Waiting</span>
-                                {% endif %}
-                            </div>
-                        </div>
-
                         <div class="clearfix"></div>
                     </div>
 
-                    <div class="card-footer d-flex text-muted card-footer-text justify-content-between bg-lime-025">
+                    <div class="card-footer d-flex text-muted card-footer-text justify-content-between">
+                        <div>
+                        {% if app.app.slug in 'shinyapp,shinyproxyapp,dashapp,customapp,gradio,streamlit' %}
+                            {% if app.pvc == None %}
+                            <a title="Instructions for running the app locally" rel="Instructions for running the app locally" href="#" class="btn btn-outline-serve btn-sm" data-bs-toggle="modal" data-bs-target="#dockerInfoModal" data-app-name="{{ app.name }}" data-app-image="{{ app.image }}" data-app-port="{{ app.port }}"><i class="bi bi-download"></i> Run Locally</a>
+                            {% endif %}
+                            {% endif %}
+                            {% if app.source_code_url %}
+                            <a id="source-code-url" target="_blank" title="Source code of the app" rel="Link to the source code of the app" href="{{ app.source_code_url }}" class="btn btn-outline-serve btn-sm"> <i class="bi bi-code-slash"></i> Source Code</a>
+                            {% endif %}
+                            </div>
+                            {% if "Serve" in app.app.name or app.app.name == "Python Model Deployment" %}
+                                <a class="btn btn-primary btn-sm" onclick="copyClip('{{app.url}}')">Copy API Endpoint</a>
+                            {% else %}
+                                <a title="Launch the app" rel="Link to launch the app" href="{{ app.url }}" target="_blank" class="btn btn-primary btn-sm">Launch</a>
+                            {% endif %}
+                    </div>
+                    <div class="card-footer d-flex text-muted card-footer-text justify-content-between bg-lime-025 rounded-bottom">
                         <div class="text-start">
                             <span>{{ app.app.name }}</span>
                         </div>

templates/common/app_card_docker_info.html

@@ -18,7 +18,7 @@ <h6>Step 3. Stop the app</h6>
 
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-outline-dark btn-outline-cancel" data-bs-dismiss="modal">Close</button>
         </div>
       </div>
     </div>

templates/common/navbar.html

@@ -9,33 +9,33 @@
                 </a>
             </div>
         {% if not minimum %}
-            <div class="col-12 col-lg-9 d-flex justify-content-lg-end justify-content-center py-2">
-                <ul class="nav text-center justify-content-center align-items-center">
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'portal:home' %}" target="_self" title="Homepage">
+            <div class="col-12 col-lg-9 d-flex justify-content-lg-end justify-content-center py-2 zero-padding">
+                <ul class="nav text-center justify-content-center align-items-center" >
+                    <li class="nav-item mx-1">
+                        <a class="nav-link serve-main-nav {% if request.path == '/' %}active{% endif %}" href="{% url 'portal:home' %}" target="_self" title="Homepage">
                             <i class="fa-solid fa-home d-block mx-auto"></i>
                             Home
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'portal:apps' %}" target="_self" title="Apps">
+                    <li class="nav-item mx-1">
+                        <a class="nav-link serve-main-nav {% if request.path == '/apps/' %}active{% endif %}" href="{% url 'portal:apps' %}" target="_self" title="Apps & Models">
                             Apps & Models
                         </a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/docs/" target="_self" title="User guide">
-                            User guide
+                    <li class="nav-item mx-1">
+                        <a class="nav-link serve-main-nav {% if '/docs/' in request.path %}active{% endif %}" href="/docs/" target="_self" title="User Guide">
+                            User Guide
                         </a>
                     </li>
                     {% if request.user.is_authenticated %}
-
-                    <li class="nav-item ">
-                        <a class="nav-link" href="{% url 'projects:index' %}" target="_self" title="My projects">
-                            My projects
+                    <li class="nav-item mx-1">
+                        <a class="nav-link serve-main-nav {% if '/projects/' in request.path %}active{% endif %}" href="{% url 'projects:index' %}" target="_self" title="My Projects">
+                            My Projects
                         </a>
                     </li>
-                    <li class="btn-group">
-                        <button type="button" class="btn btn-profile dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="{{request.user.email}}">
+                    <li class="nav-separator"></li>
+                    <li class="btn-group mx-1">
+                        <button type="button" class="btn btn-profile dropdown-toggle {% if request.path == '/edit-profile/' %}active{% endif %}" data-bs-toggle="dropdown" aria-expanded="false" title="{{request.user.email}}">
                             <i class="bi bi-person-circle"></i> Profile
                         </button>
                         <ul class="dropdown-menu">
@@ -48,11 +48,14 @@
                             </form>
                         </ul>
                     </li>
-
-
                     {% else %}
-
-                    <li class="nav-item flex-wrap">
+                    <li class="nav-item mx-1">
+                        <a class="nav-link serve-main-nav {% if '/about/' in request.path %}active{% endif %}" href="{% url 'portal:about' %}" target="_self" title="About">
+                            About
+                        </a>
+                    </li>
+                    <li class="nav-separator"></li>
+                    <li class="nav-item flex-wrap mx-1">
                         <a class="btn btn-profile order-lg-2 order-1 mx-2 {% if maintenance_mode|is_login_signup_disabled %}disabled{% endif %}" href="{% url 'common:signup' %}">
                             <i class="bi bi-person-plus"></i> Register
                         </a>

templates/portal/apps.html

@@ -8,7 +8,7 @@
 <div class="row">
     <div class="col">
         <h3 class="h3 mb-3 me-5">
-            Public applications and models
+            Public Applications & Models
             {% if published_apps|length > 0 %}
             <span class="ghost-number">{{ published_apps|length }}</span>
             {% endif %}

templates/projects/partials/app_instances_table.html

@@ -17,8 +17,8 @@
         <tr class="odd">
 
             {% static 'images/logos/apps/' as static_url %}
-            <td><img src="{{ static_url }}{{ instance.app.logo|default:'default-logo.svg' }}" class="img-fluid "
-                    alt="App Logo" style="max-height:25px;"></td>
+            <td style="text-align: center;"><img src="{{ static_url }}{{ instance.app.logo|default:'default-logo.svg' }}" class="img-fluid "
+                    alt="App Logo" style="max-width:25px;min-width:20px;"></td>
             <td class="d-none d-xxl-table-cell ">{{ instance.app.name }}</td>
             {% if instance.url %}
             <td class="sorting_1">