Merge pull request #401 from laughing0li/master

AUS-4167 Minor inconsistent styling issues
AuScope · Jun 19, 2024 · 858a14c · 858a14c
2 parents c357e0e + 51de2a7
commit 858a14c
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 11 deletions.
diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.html b/src/app/menupanel/activelayers/activelayerspanel.component.html
@@ -53,9 +53,9 @@
                         <div class="card-header">
                             <ul id="card-tab" class="nav nav-tabs">
                                 <!-- Layer Styling tab -->
-                                <li (click)="selectTabPanel(layer.id,'filterpanel')" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.filterpanel.expanded}">
+                                <li (click)="selectTabPanel(layer.id,'filterpanel')" class="tab-item">
                                     <a data-toggle="tab">
-                                        <span class="d-none d-sm-inline">Layer Styling</span>
+                                        <span class="d-none tab-link d-sm-inline mr-2">Layer Styling</span>
                                     </a>
                                 </li>
                                 <!-- Layer Download tab -->
@@ -70,9 +70,12 @@
                             <!-- Add bookmark button -->
                             <button *ngIf="isUserLoggedIn() && !isLayerBookmarked(layer.id)" (click)="addLayerBookmark(layer.id)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Bookmark Layer"><i class="fa fa-sm fa-bookmark-o"></i></button>
                             <!-- Remove bookmark button -->
-                            <button *ngIf="isUserLoggedIn() && isLayerBookmarked(layer.id)" (click)="removeLayerBookmark(layer.id)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Remove Layer Bookmark"><i class="fa fa-sm fa-bookmark"></i></button>
+                            <button *ngIf="isUserLoggedIn() && isLayerBookmarked(layer.id)" (click)="removeLayerBookmark(layer.id)" class="btn-info" title="Remove Layer Bookmark"><i class="fa fa-sm fa-bookmark"></i></button>
                             <!-- Info button  -->
-                            <button (click)="displayRecordInformation(layer)" type="button" class="btn btn-sm btn-info top-layer-btn" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.infopanel.expanded}">Info</button>
+                            <!-- <button (click)="displayRecordInformation(layer)" type="button" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.filterpanel.expanded}">Info</button> -->
+                            <div class="rh_info">	
+                                <button (click)="displayRecordInformation(layer)" type="button" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id)?.tabpanel.infopanel.expanded}">Info</button>
+                            </div>
                         </div>
                     </div>
                     <div id="card-tab-content" class="tab-content">

diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.scss b/src/app/menupanel/activelayers/activelayerspanel.component.scss
@@ -192,3 +192,39 @@
 u {
   text-decoration: none;
 }
+
+.tab-item {
+    display: inline-block;
+    // margin-right: 10px;
+    cursor: pointer;
+    padding-bottom: 8px;
+}
+
+.tab-link {
+    display: inline-block;
+    padding: 10px 15px;
+    text-decoration: none;
+    color: #605E7B; /* Primary color */
+    background-color: #f8f9fa; /* Light background */
+    border: 1px solid #dee2e6; /* Border color */
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.tab-link:hover,
+.tab-link:focus {
+    background-color: #e2e6ea; /* Light hover color */
+    color: #605E7B; /* Darker text color on hover */
+}
+
+.tab-link.active {
+    background-color: #605E7B; /* Active background color */
+    color: #ffffff; /* Active text color */
+    border-color: #605E7B;
+}
+
+.rh_info .btn-info {
+    margin-bottom: 24px; 
+    background-color: #117a8b; 
+    border-color:#10707f;
+}
diff --git a/src/app/menupanel/custompanel/layergroup.component.html b/src/app/menupanel/custompanel/layergroup.component.html
@@ -37,15 +37,15 @@
 					<div class = "rh_info_wrap">
 						<div class="card-header">
 							<ul id="card-tab" class="nav nav-tabs float-right">
-								<li (click)="selectTabPanel(layer.id,'filterpanel')" [ngClass]="{'active': getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">
-									<a data-toggle="tab">
-										<span class="d-none d-sm-inline">Map Layer</span>
-									</a>
-								</li>
-							</ul>
+                                <li class="tab-item" (click)="selectTabPanel(layer.id,'filterpanel')">
+                                    <a data-toggle="tab">
+                                        <span class="d-none d-sm-inline tab-link">Map Layer</span>
+                                    </a>
+                                </li>
+                            </ul>
 						</div>
 						<div class="rh_info">	
-							<button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">info</button>
+							<button (click)="displayRecordInformation(layer)" class="btn-info" title="Information" [ngClass]="{'active': getUILayerModel(layer.id) && getUILayerModel(layer.id).tabpanel.filterpanel.expanded}">Info</button>
 						</div>
 					</div>
 					<div id="card-tab-content" class="tab-content">

diff --git a/src/app/menupanel/menupanel.scss b/src/app/menupanel/menupanel.scss
@@ -341,4 +341,34 @@ input[type=checkbox] + label {
 .preview-legend-title {
     font-weight: bold;
     margin-bottom: 8px;
+}
+
+.tab-item {
+    display: inline-block;
+    // margin-right: 10px;
+    cursor: pointer;
+    padding-bottom: 8px;
+}
+
+.tab-link {
+    display: inline-block;
+    padding: 10px 15px;
+    text-decoration: none;
+    color: #605E7B; /* Primary color */
+    background-color: #f8f9fa; /* Light background */
+    border: 1px solid #dee2e6; /* Border color */
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.tab-link:hover,
+.tab-link:focus {
+    background-color: #e2e6ea; /* Light hover color */
+    color: #605E7B; /* Darker text color on hover */
+}
+
+.tab-link.active {
+    background-color: #605E7B; /* Active background color */
+    color: #ffffff; /* Active text color */
+    border-color: #605E7B;
 }