detached ad67f6b

Fix mobile layout for mobile

commit
ad67f6b6a4121e38f33edd33c349c04dc2858588
author
bnema · · 2023-09-16 08:38 UTC
parent
243b82f
signature
unsigned
3 files · +48 -24
Unified
UnifiedSplit
M internal/gotemplate/models/html/admin/index.gohtml +11 -23
@@ -13,43 +13,32 @@
1313 <script src="assets/js/custom.js"></script>
1414 </head>
1515
16-<body class="bg-zinc-200 flex flex-col md:flex-row">
17- <div class="md:hidden flex flex-col items-center space-y-4 p-4">
18- <div id="logo-mascot-header" class="flex justify-center">
19- <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo gordon" class="h-32" />
20- </div>
21- <div class="w-full h-10 bg-gray-300 rounded-lg">
22- <div class="flex justify-between items-center h-full px-2">
23- <input type="text" class="w-full h-full bg-transparent outline-none" placeholder="Search" />
24- <i class="iconoir-search"></i>
25- </div>
26- </div>
27- </div>
28-
16+<body class="bg-zinc-200 flex flex-col md:flex-row p-4 md:p-8 p-0">
2917 <div class="w-full md:w-1/5 flex flex-col space-evenly p-4 md:p-0">
30- <div id="logo-mascot-leftnav" class="hidden md:flex justify-center p-4">
18+ <div class="hidden md:flex justify-center p-4">
3119 <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo" class="h-32" />
3220 </div>
3321 <div class="p-4 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4">
3422 <div class="w-full flex justify-center">
3523 <h1 class="gordon-title text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter">Gordon</h1>
36- <span class="text-gordonmascot-mblue text-sm">v0.0.1</span>
24+ <span class="text-gordonmascot-mblue text-sm">{{ .BuildVersion }}</span>
3725 </div>
38- <div id="menu-leftnav" class="w-full">
39- <ul class="flex flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4">
40- <li class="flex items-center">
26+ <div class="w-full">
27+ <ul
28+ class="flex flex-wrap md:flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4 min-w-fit">
29+ <li class="flex items-center w-1/2 md:w-full">
4130 <i class="iconoir-dashboard-speed mr-2 md:text-3xl"></i>
42- <a href="index.html">Dashboard</a>
31+ <a href="#">Dashboard</a>
4332 </li>
44- <li class="flex items-center">
33+ <li class="flex items-center w-1/2 md:w-full">
4534 <i class="iconoir-server mr-2 md:text-3xl"></i>
4635 <a href="#manager">Manager</a>
4736 </li>
48- <li class="flex items-center">
37+ <li class="flex items-center w-1/2 md:w-full">
4938 <i class="iconoir-community mr-2 md:text-3xl"></i>
5039 <a href="#users">Users</a>
5140 </li>
52- <li class="flex items-center">
41+ <li class="flex items-center w-1/2 md:w-full">
5342 <i class="iconoir-database-settings mr-2 md:text-3xl"></i>
5443 <a href="#gordon-settings">Settings</a>
5544 </li>
@@ -67,7 +56,6 @@
6756 </div>
6857 </div>
6958 </div>
70-
7159 <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow">
7260 <div class="flex-grow bg-white p-4 rounded-md shadow mb-4">
7361 <div class="w-full rounded-sm bg-gray-300"></div>
@@ -13,43 +13,32 @@
13 <script src="assets/js/custom.js"></script>13 <script src="assets/js/custom.js"></script>
14 </head>14 </head>
15 15
16-<body class="bg-zinc-200 flex flex-col md:flex-row">16+<body class="bg-zinc-200 flex flex-col md:flex-row p-4 md:p-8 p-0">
17- <div class="md:hidden flex flex-col items-center space-y-4 p-4">
18- <div id="logo-mascot-header" class="flex justify-center">
19- <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo gordon" class="h-32" />
20- </div>
21- <div class="w-full h-10 bg-gray-300 rounded-lg">
22- <div class="flex justify-between items-center h-full px-2">
23- <input type="text" class="w-full h-full bg-transparent outline-none" placeholder="Search" />
24- <i class="iconoir-search"></i>
25- </div>
26- </div>
27- </div>
28-
29 <div class="w-full md:w-1/5 flex flex-col space-evenly p-4 md:p-0">17 <div class="w-full md:w-1/5 flex flex-col space-evenly p-4 md:p-0">
30- <div id="logo-mascot-leftnav" class="hidden md:flex justify-center p-4">18+ <div class="hidden md:flex justify-center p-4">
31 <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo" class="h-32" />19 <img src="/assets/imgs/gordon-mascot-hq-trsp.png" alt="logo" class="h-32" />
32 </div>20 </div>
33 <div class="p-4 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4">21 <div class="p-4 flex flex-col bg-gordonmascot-lblue rounded-lg shadow space-y-4">
34 <div class="w-full flex justify-center">22 <div class="w-full flex justify-center">
35 <h1 class="gordon-title text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter">Gordon</h1>23 <h1 class="gordon-title text-4xl xl:text-5xl text-gordonmascot-hblue tracking-tighter">Gordon</h1>
36- <span class="text-gordonmascot-mblue text-sm">v0.0.1</span>24+ <span class="text-gordonmascot-mblue text-sm">{{ .BuildVersion }}</span>
37 </div>25 </div>
38- <div id="menu-leftnav" class="w-full">26+ <div class="w-full">
39- <ul class="flex flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4">27+ <ul
40- <li class="flex items-center">28+ class="flex flex-wrap md:flex-col md:space-y-6 md:py-8 font-semibold text-gray-100 text-lg md:text-2xl md:pl-4 min-w-fit">
29+ <li class="flex items-center w-1/2 md:w-full">
41 <i class="iconoir-dashboard-speed mr-2 md:text-3xl"></i>30 <i class="iconoir-dashboard-speed mr-2 md:text-3xl"></i>
42- <a href="index.html">Dashboard</a>31+ <a href="#">Dashboard</a>
43 </li>32 </li>
44- <li class="flex items-center">33+ <li class="flex items-center w-1/2 md:w-full">
45 <i class="iconoir-server mr-2 md:text-3xl"></i>34 <i class="iconoir-server mr-2 md:text-3xl"></i>
46 <a href="#manager">Manager</a>35 <a href="#manager">Manager</a>
47 </li>36 </li>
48- <li class="flex items-center">37+ <li class="flex items-center w-1/2 md:w-full">
49 <i class="iconoir-community mr-2 md:text-3xl"></i>38 <i class="iconoir-community mr-2 md:text-3xl"></i>
50 <a href="#users">Users</a>39 <a href="#users">Users</a>
51 </li>40 </li>
52- <li class="flex items-center">41+ <li class="flex items-center w-1/2 md:w-full">
53 <i class="iconoir-database-settings mr-2 md:text-3xl"></i>42 <i class="iconoir-database-settings mr-2 md:text-3xl"></i>
54 <a href="#gordon-settings">Settings</a>43 <a href="#gordon-settings">Settings</a>
55 </li>44 </li>
@@ -67,7 +56,6 @@
67 </div>56 </div>
68 </div>57 </div>
69 </div>58 </div>
70-
71 <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow">59 <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 flex-grow">
72 <div class="flex-grow bg-white p-4 rounded-md shadow mb-4">60 <div class="flex-grow bg-white p-4 rounded-md shadow mb-4">
73 <div class="w-full rounded-sm bg-gray-300"></div>61 <div class="w-full rounded-sm bg-gray-300"></div>
M internal/httpserve/middleware/commondata.go +0 -1
@@ -8,7 +8,6 @@ import (
88 func SetCommonDataMiddleware(a *app.App) echo.MiddlewareFunc {
99 return func(next echo.HandlerFunc) echo.HandlerFunc {
1010 return func(c echo.Context) error {
11- c.Set("BuildVersion", a.BuildVersion)
1211 // Add more common data if needed
1312 return next(c)
1413 }
@@ -8,7 +8,6 @@ import (
8 func SetCommonDataMiddleware(a *app.App) echo.MiddlewareFunc {8 func SetCommonDataMiddleware(a *app.App) echo.MiddlewareFunc {
9 return func(next echo.HandlerFunc) echo.HandlerFunc {9 return func(next echo.HandlerFunc) echo.HandlerFunc {
10 return func(c echo.Context) error {10 return func(c echo.Context) error {
11- c.Set("BuildVersion", a.BuildVersion)
12 // Add more common data if needed11 // Add more common data if needed
13 return next(c)12 return next(c)
14 }13 }
M internal/webui/public/assets/css/tailwind.css +37 -0
@@ -566,6 +566,10 @@ video {
566566 margin-top: 1rem;
567567 }
568568
569+.mb-2 {
570+ margin-bottom: 0.5rem;
571+}
572+
569573 .flex {
570574 display: flex;
571575 }
@@ -634,6 +638,15 @@ video {
634638 width: 100%;
635639 }
636640
641+.w-1\/2 {
642+ width: 50%;
643+}
644+
645+.min-w-fit {
646+ min-width: -moz-fit-content;
647+ min-width: fit-content;
648+}
649+
637650 .flex-1 {
638651 flex: 1 1 0%;
639652 }
@@ -650,6 +663,10 @@ video {
650663 flex-direction: column;
651664 }
652665
666+.flex-wrap {
667+ flex-wrap: wrap;
668+}
669+
653670 .items-center {
654671 align-items: center;
655672 }
@@ -756,6 +773,14 @@ video {
756773 padding: 1rem;
757774 }
758775
776+.p-8 {
777+ padding: 2rem;
778+}
779+
780+.p-0 {
781+ padding: 0px;
782+}
783+
759784 .px-2 {
760785 padding-left: 0.5rem;
761786 padding-right: 0.5rem;
@@ -1000,10 +1025,18 @@ video {
10001025 width: 33.333333%;
10011026 }
10021027
1028+ .md\:w-full {
1029+ width: 100%;
1030+ }
1031+
10031032 .md\:flex-row {
10041033 flex-direction: row;
10051034 }
10061035
1036+ .md\:flex-col {
1037+ flex-direction: column;
1038+ }
1039+
10071040 .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
10081041 --tw-space-y-reverse: 0;
10091042 margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1030,6 +1063,10 @@ video {
10301063 padding: 0px;
10311064 }
10321065
1066+ .md\:p-2 {
1067+ padding: 0.5rem;
1068+ }
1069+
10331070 .md\:py-8 {
10341071 padding-top: 2rem;
10351072 padding-bottom: 2rem;
@@ -566,6 +566,10 @@ video {
566 margin-top: 1rem;566 margin-top: 1rem;
567 }567 }
568 568
569+.mb-2 {
570+ margin-bottom: 0.5rem;
571+}
572+
569 .flex {573 .flex {
570 display: flex;574 display: flex;
571 }575 }
@@ -634,6 +638,15 @@ video {
634 width: 100%;638 width: 100%;
635 }639 }
636 640
641+.w-1\/2 {
642+ width: 50%;
643+}
644+
645+.min-w-fit {
646+ min-width: -moz-fit-content;
647+ min-width: fit-content;
648+}
649+
637 .flex-1 {650 .flex-1 {
638 flex: 1 1 0%;651 flex: 1 1 0%;
639 }652 }
@@ -650,6 +663,10 @@ video {
650 flex-direction: column;663 flex-direction: column;
651 }664 }
652 665
666+.flex-wrap {
667+ flex-wrap: wrap;
668+}
669+
653 .items-center {670 .items-center {
654 align-items: center;671 align-items: center;
655 }672 }
@@ -756,6 +773,14 @@ video {
756 padding: 1rem;773 padding: 1rem;
757 }774 }
758 775
776+.p-8 {
777+ padding: 2rem;
778+}
779+
780+.p-0 {
781+ padding: 0px;
782+}
783+
759 .px-2 {784 .px-2 {
760 padding-left: 0.5rem;785 padding-left: 0.5rem;
761 padding-right: 0.5rem;786 padding-right: 0.5rem;
@@ -1000,10 +1025,18 @@ video {
1000 width: 33.333333%;1025 width: 33.333333%;
1001 }1026 }
1002 1027
1028+ .md\:w-full {
1029+ width: 100%;
1030+ }
1031+
1003 .md\:flex-row {1032 .md\:flex-row {
1004 flex-direction: row;1033 flex-direction: row;
1005 }1034 }
1006 1035
1036+ .md\:flex-col {
1037+ flex-direction: column;
1038+ }
1039+
1007 .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {1040 .md\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
1008 --tw-space-y-reverse: 0;1041 --tw-space-y-reverse: 0;
1009 margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));1042 margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1030,6 +1063,10 @@ video {
1030 padding: 0px;1063 padding: 0px;
1031 }1064 }
1032 1065
1066+ .md\:p-2 {
1067+ padding: 0.5rem;
1068+ }
1069+
1033 .md\:py-8 {1070 .md\:py-8 {
1034 padding-top: 2rem;1071 padding-top: 2rem;
1035 padding-bottom: 2rem;1072 padding-bottom: 2rem;

Keyboard shortcuts

Single-key shortcuts are on. ctrl k and esc work whatever this says.

ctrl k :
go to a section, branch, tag, file or repository
?
this list
j k
move the row cursor down / up
enter
open the row under the cursor; on Files, a directory opens or closes in place
↑ ↓ ← → home end
in the file tree (focus on a row): previous / next row, close / open a directory or go to its parent / first entry, first / last row. They never open a file
l h
on Files: open a directory or a file / close a directory or go up to its parent, then to the parent page. Elsewhere: into the side panel (on a merge request, its files) / back to the content; there j k move between its controls
g g G
first / last row
/
filter the list; on Files, find a file anywhere in the repository (esc clears, enter opens the best match)
b
switch branch or tag
g s g f g c g b g m g i g r g a
tabs: summary, files, commits, branches & tags, merge requests, issues, releases, actions (when available)
g h
home
w
wide mode: use the whole width of the screen, or not (remembered)
y
copy a permalink pinned to the commit
d u x
diff: split / unified / collapse or expand all
e E
diff: the whole file in view / every file, with the lines the hunks hide
n
merge request: next note in the diff
esc
close a dialog, leave a field

Branches 7

Tags 106

↑↓ moveenter openesc close