UIFixes: Minor Appmanager and Launcher UI fixes
Change-Id: I1eabedd0191e6ae03cd6dcd945d569a93956a5d2
diff --git a/core/installer/welcome/appmanager-tmpl/app.html b/core/installer/welcome/appmanager-tmpl/app.html
index d76dde9..2967bd0 100644
--- a/core/installer/welcome/appmanager-tmpl/app.html
+++ b/core/installer/welcome/appmanager-tmpl/app.html
@@ -86,9 +86,9 @@
{{ end }}
{{ define "extra_menu" }}
- <li><a href="/app/{{ .App.Slug }}" class="{{ if eq $.CurrentPage .App.Name }}outline{{ else }}secondary{{ end }}">{{ .App.Name }}</a></li>
+ <li><a href="/app/{{ .App.Slug }}" class="{{ if eq $.CurrentPage .App.Name }}primary{{ end }}">{{ .App.Name }}</a></li>
{{ range .Instances }}
- <li><a href="/instance/{{ .Id }}" class="{{ if eq $.CurrentPage .Id }}outline{{ else }}secondary{{ end }}">{{ .Id }}</a></li>
+ <li><a href="/instance/{{ .Id }}" class="{{ if eq $.CurrentPage .Id }}primary{{ end }}">{{ .Id }}</a></li>
{{ end }}
{{ end }}
diff --git a/core/installer/welcome/appmanager-tmpl/base.html b/core/installer/welcome/appmanager-tmpl/base.html
index a227233..a32809f 100644
--- a/core/installer/welcome/appmanager-tmpl/base.html
+++ b/core/installer/welcome/appmanager-tmpl/base.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" type="text/css" href="/static/appmanager.css?v=0.0.8">
+ <link rel="stylesheet" type="text/css" href="/static/appmanager.css?v=0.0.11">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
@@ -14,9 +14,9 @@
<aside id="menu-nav">
<nav id="menu" class="is-sticky-above-lg">
<ul>
- <li><a href="/" class="{{ if (eq .CurrentPage "ALL") }}outline{{ else }}secondary{{ end }}">All</a></li>
- <li><a href="/installed" class="{{ if (eq .CurrentPage "INSTALLED") }}outline{{ else }}secondary{{ end }}">Installed</a></li>
- <li><a href="/not-installed" class="{{ if (eq .CurrentPage "NOT_INSTALLED") }}outline{{ else }}secondary{{ end }}">Not Installed</a></li>
+ <li><a href="/" class="{{ if (eq .CurrentPage "ALL") }}primary{{ end }}">All</a></li>
+ <li><a href="/installed" class="{{ if (eq .CurrentPage "INSTALLED") }}primary{{ end }}">Installed</a></li>
+ <li><a href="/not-installed" class="{{ if (eq .CurrentPage "NOT_INSTALLED") }}primary{{ end }}">Not Installed</a></li>
<hr>
{{ block "extra_menu" . }}{{ end }}
</ul>
diff --git a/core/installer/welcome/appmanager-tmpl/index.html b/core/installer/welcome/appmanager-tmpl/index.html
index d934cd3..6ba92c3 100644
--- a/core/installer/welcome/appmanager-tmpl/index.html
+++ b/core/installer/welcome/appmanager-tmpl/index.html
@@ -19,7 +19,7 @@
<div class="app-details">
<div class="app-name-container">
<h3 class="app">{{ .Name }}</h3>
- <span class="instance-count" data-tooltip="Instances {{ len .Instances }}" data-placement="bottom">{{ len .Instances }}</span>
+ <span class="instance-count" data-tooltip="Instances {{ len .Instances }}" data-placement="left">{{ len .Instances }}</span>
</div>
<p class="description">{{ .ShortDescription }}</p>
</div>
diff --git a/core/installer/welcome/launcher-tmpl/launcher.html b/core/installer/welcome/launcher-tmpl/launcher.html
index ca15ee9..0177c5d 100644
--- a/core/installer/welcome/launcher-tmpl/launcher.html
+++ b/core/installer/welcome/launcher-tmpl/launcher.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dodo: Launcher</title>
<link rel="stylesheet" type="text/css" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" type="text/css" href="/static/launcher.css?v=0.0.15">
+ <link rel="stylesheet" type="text/css" href="/static/launcher.css?v=0.0.18">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
</head>
<body class="container-fluid">
diff --git a/core/installer/welcome/static/appmanager.css b/core/installer/welcome/static/appmanager.css
index f48a1ea..5bd3dc4 100644
--- a/core/installer/welcome/static/appmanager.css
+++ b/core/installer/welcome/static/appmanager.css
@@ -18,18 +18,38 @@
--pico-grid-spacing-horizontal: 0;
--search-background-color: #d6d6d6;
--pico-color: #3a3a3a;
- --pico-form-element-color: var(--pico-muted-color);
+ --pico-form-element-color: #3a3a3a;
--pico-primary-inverse: #3a3a3a;
+ --pico-tooltip-background-color: #3a3a3a;
+ --pico-tooltip-color: #d6d6d6;
+ --pico-icon-color: #3a3a3a;
+ --icon-width: 50px;
+ --icon-height: 50px;
+ --icon-margin-left: 6px;
+ --icon-margin-right: 6px;
+ --app-details-padding-right: calc(
+ var(--icon-margin-right) + var(--icon-margin-left) + var(--icon-width)
+ );
h3,
p {
- color: var(--pico-accordion-open-summary-color);
+ --pico-color: #3a3a3a;
}
label {
- color: var(--pico-secondary);
+ color: var(--pico-color);
}
input:is([type="checkbox"]) {
--pico-form-element-focus-color: none;
- --pico-border-color: var(--pico-secondary);
+ --pico-border-color: var(--pico-color);
+ }
+ [data-tooltip]:not(a, button, input) {
+ text-decoration: none;
+ cursor: pointer;
+ }
+ #menu-nav nav ul li a {
+ --pico-primary: #3a3a3a;
+ }
+ .icon {
+ color: var(--pico-icon-color);
}
}
@@ -45,6 +65,14 @@
margin-left: 0;
margin-right: 0;
}
+
+ #content {
+ width: 100% !important;
+ }
+
+ .app-details {
+ padding-right: 22px !important;
+ }
}
body > header {
@@ -89,7 +117,7 @@
body > main {
display: grid;
grid-template-rows: auto auto 1fr;
- grid-template-columns: 11rem 1fr;
+ grid-template-columns: 11rem calc(100% - 11rem);
grid-template-areas: "menu content";
column-gap: 2rem;
margin-top: 1rem;
@@ -102,6 +130,10 @@
color: var(--pico-primary-hover);
}
+header > svg {
+ margin-right: var(--pico-spacing);
+}
+
.search-bar {
max-width: 616px;
width: 100%;
@@ -117,9 +149,10 @@
}
.icon {
- margin: 0 6px;
+ margin: 0 var(--icon-margin-right) 0 var(--icon-margin-left);
flex-shrink: 0;
- color: var(--pico-accordion-open-summary-color);
+ /* --pico-primary: #3a3a3a;
+ color: var(--pico-color); */
}
.app-details {
@@ -127,6 +160,7 @@
flex-direction: column;
flex-grow: 1;
position: relative;
+ padding-right: var(--app-details-padding-right);
}
.app-name-container {
@@ -148,15 +182,17 @@
color: var(--pico-primary-hover);
}
-.description {
- margin-bottom: 3px;
- margin-left: 5px;
- text-decoration: none !important;
-}
-
.app-link:hover .app {
text-decoration: underline;
}
+.primary:hover {
+ text-decoration: underline;
+ color: var(--pico-primary-hover);
+}
+
+.description {
+ margin: 0 0 3px 5px;
+}
.instance-count {
display: flex;
@@ -210,6 +246,10 @@
padding-bottom: 0;
}
+nav hr {
+ border-color: var(--pico-color);
+}
+
input[type="search"] {
margin-bottom: 0;
height: 100%;
@@ -253,6 +293,7 @@
#content {
grid-area: content;
+ width: calc(100% - 11rem);
}
main > aside#menu-nav nav {
@@ -278,3 +319,7 @@
.progress li {
list-style-type: none;
}
+
+.primary {
+ color: #7f9f7f;
+}
diff --git a/core/installer/welcome/static/launcher.css b/core/installer/welcome/static/launcher.css
index 12d24fe..307c4e5 100644
--- a/core/installer/welcome/static/launcher.css
+++ b/core/installer/welcome/static/launcher.css
@@ -19,8 +19,8 @@
font-family: Hack, monospace;
display: flex;
height: 100vh;
- padding-left: 5px !important;
- padding-right: 5px !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
background-color: var(--bodyBg);
overflow-x: hidden;
overflow-y: hidden;
@@ -93,7 +93,7 @@
.tooltip {
position: absolute;
width: 200px;
- left: 90px;
+ left: 80px;
transform: translateY(-50%);
background-color: var(--bodyBg);
padding: 5px;
@@ -105,6 +105,7 @@
opacity: 0;
cursor: auto;
font-size: 16px;
+ box-shadow: 2px 2px 5px var(--bodyBg);
}
.help-button {
@@ -281,8 +282,8 @@
.tooltip-user {
position: absolute;
- top: 45px;
- left: 85.5px;
+ top: 38.7px;
+ left: 80px;
transform: translateY(-50%);
width: 234px;
background-color: var(--bodyBg);
@@ -294,6 +295,7 @@
visibility: hidden;
opacity: 0;
cursor: auto;
+ box-shadow: 2px 2px 5px var(--bodyBg);
}
#logout-button {