fix(styles): resource view tabs colors

l3s-learnweb · Oct 17, 2023 · f88236c · f88236c
1 parent 7acd00d
commit f88236c
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 60 deletions.
diff --git a/src/main/webapp/WEB-INF/templates/blocks/resourceview/embedded.xhtml b/src/main/webapp/WEB-INF/templates/blocks/resourceview/embedded.xhtml
@@ -51,7 +51,7 @@
     </c:when>
 
     <c:when test="${res.type eq 'website'}">
-        <p:tabView styleClass="res-embedded-tabs" activeIndex="#{res.defaultTab.ordinal()}">
+        <p:tabView styleClass="ui-tabs-plaid res-embedded-tabs" activeIndex="#{res.defaultTab.ordinal()}">
             <p:tab title="${msg['resource.tab.SCREENSHOT']}">
                 <img src="#{res.thumbnailLargest}" alt="#{res.title}" class="d-block"/>
             </p:tab>

diff --git a/src/main/webapp/WEB-INF/templates/blocks/resourceview/embedded_survey.xhtml b/src/main/webapp/WEB-INF/templates/blocks/resourceview/embedded_survey.xhtml
@@ -8,7 +8,7 @@
 <!--@elvariable id="res" type="de.l3s.learnweb.resource.survey.SurveyResource"-->
 
 <c:if test="#{res.canModerateResource(userBean.user)}">
-    <p:tabView id="survey_tabs" styleClass="res-embedded-tabs" activeIndex="${resourceDetailBean.tab}" prependId="false"
+    <p:tabView id="survey_tabs" styleClass="ui-tabs-plaid res-embedded-tabs" activeIndex="${resourceDetailBean.tab}" prependId="false"
                dynamic="true" cache="false" effect="fade" onTabChange="updateSearchQuery('tab', index);">
         <p:tab id="questions_tab" title="Edit Questions">
             <ui:decorate template="/WEB-INF/templates/blocks/survey/questions.xhtml"/>

diff --git a/src/main/webapp/WEB-INF/templates/blocks/resourceview/resource_view.xhtml b/src/main/webapp/WEB-INF/templates/blocks/resourceview/resource_view.xhtml
@@ -6,7 +6,7 @@
 
 <!--@elvariable id="res" type="de.l3s.learnweb.resource.Resource"-->
 
-<p:tabView dynamic="true" cache="true" prependId="false">
+<p:tabView dynamic="true" cache="true" prependId="false" styleClass="ui-tabs-plaid mb-0">
     <p:ajax event="tabChange" onstart="PF('detailsOverlay').show();" oncomplete="PF('detailsOverlay').hide()"/>
 
     <p:tab title="#{msg.details_right_pane}">

diff --git a/src/main/webapp/resources/learnweb/sass/california/components/_tabs.scss b/src/main/webapp/resources/learnweb/sass/california/components/_tabs.scss
@@ -1,9 +1,15 @@
 body {
   .ui-tabs {
+    /* Makes background transparent */
     &.ui-tabs-plaid {
       .ui-tabs-nav {
         background: none;
 
+        li.ui-tabs-header {
+          background: none;
+          border-color: transparent;
+        }
+
         &::before {
           content: none;
         }
@@ -21,20 +27,7 @@ body {
       }
     }
 
-    &.ui-tabs-top {
-      > .ui-tabs-nav li.ui-tabs-header {
-        border: var(--border-width) var(--border-style) var(--border-color);
-        border-top: 3px solid var(--tertiary-bg);
-        border-bottom: 0;
-
-        &.ui-state-active {
-          border-color: var(--border-color);
-          border-top-color: $primaryColor;
-          margin-bottom: calc(var(--border-width) * -1);
-        }
-      }
-    }
-
+    /* Makes tabs stretches to full width */
     &.ui-tabs-fluid {
       ul.ui-tabs-nav {
         display: flex;

diff --git a/src/main/webapp/resources/learnweb/sass/components/_resource-view.scss b/src/main/webapp/resources/learnweb/sass/components/_resource-view.scss
@@ -52,10 +52,43 @@ body .res-view {
     }
   }
 
-  .res-embedded-tabs {
+  .ui-tabs {
+    .ui-tabs-panel {
+      border-bottom: 0;
+      border-left: 0;
+      border-right: 0;
+    }
+
+    > .ui-tabs-nav {
+      li.ui-tabs-header {
+        padding: $spacer * 0.5 $spacer;
+        border-bottom-width: 4px;
+        border-color: transparent;
+
+        a {
+          color: var(--body-color) !important;
+        }
+
+        &.ui-state-active, &.ui-state-hover {
+          border-color: var(--secondary-color);
+        }
+      }
+    }
+  }
+
+  .ui-tabs.res-embedded-tabs {
     height: 100%;
     display: flex;
     flex-direction: column;
+    margin-bottom: 0;
+
+    > .ui-tabs-nav {
+      li.ui-tabs-header {
+        a {
+          color: var(--white) !important;
+        }
+      }
+    }
 
     .ui-tabs-panels {
       overflow: auto;
@@ -113,48 +146,6 @@ body .res-view {
     }
   }
 
-  .ui-tabs {
-    margin-bottom: 0;
-
-    > .ui-tabs-nav {
-      background: inherit;
-
-      &::before {
-        border-bottom: var(--border-width) solid var(--body-color);
-      }
-
-      li.ui-tabs-header {
-        background: inherit;
-        padding: $spacer * 0.5 $spacer;
-        border: 0;
-        border-bottom: 4px solid transparent;
-
-        a {
-          color: var(--body-color);
-        }
-
-        &.ui-state-active {
-          background: inherit;
-          border-bottom-color: var(--secondary-color);
-          margin-bottom: 0;
-        }
-
-        &.ui-state-hover {
-          border-bottom-color: var(--secondary-color);
-
-          a {
-            color: var(--body-color);
-          }
-        }
-      }
-    }
-
-    .ui-tabs-panels {
-      color: inherit;
-      background: inherit;
-    }
-  }
-
   .ui-inplace {
     display: block;
     margin-bottom: $spacer * 0.25;