changed default separator to comma, modified navbar for mobile

Author: gluek

.air.toml

@@ -3,43 +3,49 @@ testdata_dir = "testdata"
 tmp_dir = "tmp"
 
 [build]
-  args_bin = []
-  bin = "tmp\\main.exe"
-  cmd = "go build -o ./tmp/main.exe ./main.go"
-  delay = 1000
-  exclude_dir = ["internal\\assets", "tmp", "internal\\database", "testdata", "internal\\node_modules"]
-  exclude_file = []
-  exclude_regex = ["_templ.go"]
-  exclude_unchanged = false
-  follow_symlink = false
-  include_dir = []
-  include_ext = ["go", "templ", "html"]
-  include_file = []
-  kill_delay = "0s"
-  log = "build-errors.log"
-  poll = false
-  poll_interval = 0
-  post_cmd = []
-  pre_cmd = ["task assets"]
-  rerun = false
-  rerun_delay = 500
-  send_interrupt = true
-  stop_on_error = true
+args_bin = []
+bin = "tmp\\main.exe"
+cmd = "go build -o ./tmp/main.exe ./main_windows.go"
+delay = 1000
+exclude_dir = [
+  "internal\\assets",
+  "tmp",
+  "internal\\database",
+  "testdata",
+  "internal\\node_modules",
+]
+exclude_file = []
+exclude_regex = ["_templ.go"]
+exclude_unchanged = false
+follow_symlink = false
+include_dir = []
+include_ext = ["go", "templ", "html"]
+include_file = []
+kill_delay = "0s"
+log = "build-errors.log"
+poll = false
+poll_interval = 0
+post_cmd = []
+pre_cmd = ["task assets"]
+rerun = false
+rerun_delay = 500
+send_interrupt = true
+stop_on_error = true
 
 [color]
-  app = ""
-  build = "yellow"
-  main = "magenta"
-  runner = "green"
-  watcher = "cyan"
+app = ""
+build = "yellow"
+main = "magenta"
+runner = "green"
+watcher = "cyan"
 
 [log]
-  main_only = false
-  time = false
+main_only = false
+time = false
 
 [misc]
-  clean_on_exit = false
+clean_on_exit = false
 
 [screen]
-  clear_on_rebuild = false
-  keep_scroll = true
+clear_on_rebuild = false
+keep_scroll = true

CHANGELOG.md

@@ -6,6 +6,10 @@
 
 - Deleted projects are only hidden from projects page through is_deleted flag
 
+### Bugfix
+
+- Default decimal separator change to ',' to write a proper default config
+
 ## v0.5.6
 
 ### Bugfix

internal/assets/css/input.css

@@ -862,6 +862,15 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+    --tw-text-opacity: 1;
+    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+  }
+
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
@@ -1182,6 +1191,18 @@ html {
       border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
     }
   }
+
+  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
+    cursor: pointer;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  @supports (color: oklch(0% 0 0)) {
+    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
+      background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+    }
+  }
 }
 
 .form-control {
@@ -1254,6 +1275,59 @@ html {
   text-decoration-line: underline;
 }
 
+.menu {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  padding: 0.5rem;
+}
+
+.menu :where(li ul) {
+  position: relative;
+  white-space: nowrap;
+  margin-inline-start: 1rem;
+  padding-inline-start: 0.5rem;
+}
+
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+  display: grid;
+  grid-auto-flow: column;
+  align-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  grid-auto-columns: minmax(auto, max-content) auto max-content;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.menu li.disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: var(--fallback-bc,oklch(var(--bc)/0.3));
+}
+
+.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
+  display: none;
+}
+
+:where(.menu li) {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+
+:where(.menu li) .badge {
+  justify-self: end;
+}
+
 .navbar {
   display: flex;
   align-items: center;
@@ -1832,6 +1906,88 @@ html {
   outline-offset: 2px;
 }
 
+:where(.menu li:empty) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  opacity: 0.1;
+  margin: 0.5rem 1rem;
+  height: 1px;
+}
+
+.menu :where(li ul):before {
+  position: absolute;
+  bottom: 0.75rem;
+  inset-inline-start: 0px;
+  top: 0.75rem;
+  width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  opacity: 0.1;
+  content: "";
+}
+
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
+.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+  border-radius: var(--rounded-btn, 0.5rem);
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: start;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 200ms;
+  text-wrap: balance;
+}
+
+:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
+  cursor: pointer;
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
+}
+
+.menu :where(li > details > summary)::-webkit-details-marker {
+  display: none;
+}
+
+.menu :where(li > details > summary):after,
+.menu :where(li > .menu-dropdown-toggle):after {
+  justify-self: end;
+  display: block;
+  margin-top: -0.5rem;
+  height: 0.5rem;
+  width: 0.5rem;
+  transform: rotate(45deg);
+  transition-property: transform, margin-top;
+  transition-duration: 0.3s;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  content: "";
+  transform-origin: 75% 75%;
+  box-shadow: 2px 2px;
+  pointer-events: none;
+}
+
+.menu :where(li > details[open] > summary):after,
+.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
+  transform: rotate(225deg);
+  margin-top: 0;
+}
+
 .mockup-browser .mockup-browser-toolbar .input {
   position: relative;
   margin-left: auto;
@@ -2341,6 +2497,10 @@ html {
   margin-right: auto;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -2365,6 +2525,10 @@ html {
   height: 2.5rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -2410,6 +2574,10 @@ html {
   max-width: 20rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -2541,4 +2709,14 @@ html {
 
 input {
   color-scheme: dark;
+}
+
+@media (min-width: 640px) {
+  .sm\:block {
+    display: block;
+  }
+
+  .sm\:hidden {
+    display: none;
+  }
 }

internal/components/components.templ

@@ -124,7 +124,8 @@ templ PageHeader(contents templ.Component) {
 		</head>
 		<body>
 			<div class="flex flex-col">
-				<div class="navbar border-b shadow">
+				//default navbar
+				<div class="navbar hidden border-b shadow sm:block">
 					<div class="container mx-auto max-w-[1000px] grow">
 						<div class="hero-content h-20">
 							<a class="primary-content text-5xl font-bold" href="/">TimeTracker</a>
@@ -138,6 +139,23 @@ templ PageHeader(contents templ.Component) {
 						<button class="btn btn-ghost text-xl" hx-get="/year" hx-target="#content-section" hx-swap="innerHTML settle:0ms">Year</button>
 					</div>
 				</div>
+				// mobile navbar
+				<div class="navbar block border-b shadow sm:hidden">
+					<div class="flex w-full flex-col">
+						<div class="hero-content h-14">
+							<a class="primary-content text-5xl font-bold" href="/">TimeTracker</a>
+							<br>
+							<p class="primary-content self-end">{ version }</p>
+						</div>
+						<div class="flex w-full flex-row">
+							<button class="btn btn-ghost flex-1 text-xl" hx-get="/timeframes" hx-target="#content-section" hx-swap="innerHTML settle:0ms">Rec</button>
+							<button class="btn btn-ghost flex-1 text-xl" hx-get="/projects" hx-target="#content-section" hx-swap="innerHTML settle:0ms">Proj</button>
+							<div class="divider divider-horizontal"></div>
+							<button class="btn btn-ghost flex-1 text-xl" hx-get="/month" hx-target="#content-section" hx-swap="innerHTML settle:0ms">Month</button>
+							<button class="btn btn-ghost flex-1 text-xl" hx-get="/year" hx-target="#content-section" hx-swap="innerHTML settle:0ms">Year</button>
+						</div>
+					</div>
+				</div>
 				<div class="container mx-auto max-w-[1000px] grow">
 					<section id="content-section">
 						@contents
@@ -291,6 +309,7 @@ templ RecordList(tfList []database.Timeframe, projectList []database.Project, lo
 									hx-trigger="change delay:400ms"
 								>
 									for _, project := range projectList {
+										//TODO: Change color of deleted projects in drop down menu and throughtout other UI elements
 										if timeframe.ProjectID == project.ID {
 											<option value={ strconv.Itoa(project.ID) } selected>{ project.Name }</option>
 										} else {

main_linux.go

@@ -67,7 +67,7 @@ func viperInit() {
 	viper.SetDefault("worktime_per_week", "39h0m0s")
 	viper.SetDefault("offset_overtime", "0h0m0s")
 	viper.SetDefault("logfile", false)
-	viper.SetDefault("decimal_separator", ".")
+	viper.SetDefault("decimal_separator", ",")
 
 	viper.SetConfigName("timetrackerconf")
 	viper.SetConfigType("yaml")

main_windows.go

@@ -80,7 +80,7 @@ func viperInit() {
 	viper.SetDefault("worktime_per_week", "39h0m0s")
 	viper.SetDefault("offset_overtime", "0h0m0s")
 	viper.SetDefault("logfile", false)
-	viper.SetDefault("decimal_separator", ".")
+	viper.SetDefault("decimal_separator", ",")
 
 	viper.SetConfigName("timetracker")
 	viper.SetConfigType("yaml")