tokono.ma / diffuse
A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

Mobile UI improvements

Steven Vandevelde 1d764bf3 d68acb8f

+96 -32
+4 -4
pnpm-lock.yaml
··· 4531 4531 /spdx-correct/3.1.1: 4532 4532 dependencies: 4533 4533 spdx-expression-parse: 3.0.1 4534 - spdx-license-ids: 3.0.6 4534 + spdx-license-ids: 3.0.7 4535 4535 dev: true 4536 4536 resolution: 4537 4537 integrity: sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w== ··· 4542 4542 /spdx-expression-parse/3.0.1: 4543 4543 dependencies: 4544 4544 spdx-exceptions: 2.3.0 4545 - spdx-license-ids: 3.0.6 4545 + spdx-license-ids: 3.0.7 4546 4546 dev: true 4547 4547 resolution: 4548 4548 integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q== 4549 - /spdx-license-ids/3.0.6: 4549 + /spdx-license-ids/3.0.7: 4550 4550 dev: true 4551 4551 resolution: 4552 - integrity: sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw== 4552 + integrity: sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ== 4553 4553 /split-string/3.1.0: 4554 4554 dependencies: 4555 4555 extend-shallow: 3.0.2
+41 -7
src/Applications/UI/Navigation.elm
··· 2 2 3 3 import Alfred exposing (Alfred) 4 4 import Chunky exposing (..) 5 + import Common 5 6 import Conditional exposing (..) 6 7 import Css.Classes as C 7 8 import Html exposing (Html, text) ··· 124 125 [ C.flex ] 125 126 (items 126 127 |> List.reverse 127 - |> List.map (localItem tabindex_) 128 + |> List.map (localItem tabindex_ { amount = List.length items }) 128 129 |> List.reverse 129 130 ) 130 131 ] 131 132 132 133 133 - localItem : Int -> ( Icon msg, Label, Action msg ) -> Html msg 134 - localItem tabindex_ ( Icon icon, Label labelText labelType, action ) = 134 + localItem : Int -> { amount : Int } -> ( Icon msg, Label, Action msg ) -> Html msg 135 + localItem tabindex_ { amount } ( Icon icon, Label labelText labelType, action ) = 135 136 slab 136 137 (case action of 137 138 NavigateToPage page -> ··· 172 173 -- 173 174 , tabindex tabindex_ 174 175 ] 175 - [ ifThenElse (labelType == Hidden) C.flex_shrink_0 C.flex_grow 176 - , C.bg_transparent 176 + [ C.bg_transparent 177 177 , C.border_gray_300 178 178 , C.border_r 179 179 , C.cursor_pointer ··· 186 186 , C.text_base02 187 187 188 188 -- 189 + , ifThenElse 190 + (labelText == Common.backToIndex && labelType == Hidden && amount > 1) 191 + C.flex_shrink_0 192 + C.flex_grow 193 + 194 + -- 195 + , ifThenElse 196 + (labelText == Common.backToIndex && labelType == Hidden && amount > 1) 197 + C.overflow_visible 198 + C.overflow_hidden 199 + 200 + -- 189 201 , C.fixate__text_black 190 202 , C.last__border_r_0 191 203 204 + -- Responsive 205 + ------------- 206 + , C.sm__overflow_visible 207 + 208 + -- 209 + , ifThenElse 210 + (labelType == Hidden) 211 + C.sm__flex_shrink_0 212 + C.sm__flex_grow 213 + 214 + -- 215 + , ifThenElse 216 + (labelType == Hidden) 217 + C.sm__flex_grow_0 218 + C.sm__flex_grow 219 + 192 220 -- Dark mode 193 221 ------------ 194 222 , C.dark__border_base01 ··· 207 235 , C.mt_px 208 236 , C.pt_px 209 237 ] 210 - [ icon 16 Inherit 238 + [ inline 239 + [ C.flex_shrink_0 ] 240 + [ icon 16 Inherit ] 211 241 212 242 -- 213 243 , case labelType of ··· 218 248 slab 219 249 Html.span 220 250 [] 221 - [ C.inline_block, C.leading_tight, C.ml_1, C.truncate ] 251 + [ C.inline_block 252 + , C.leading_tight 253 + , C.ml_1 254 + , C.truncate 255 + ] 222 256 [ text labelText ] 223 257 ] 224 258 ]
+49 -19
src/Applications/UI/Tracks/View.elm
··· 128 128 ifThenElse isOnIndexPage 0 -1 129 129 in 130 130 chunk 131 - [ C.flex ] 131 + [ C.sm__flex ] 132 132 [ ----------------------------------------- 133 133 -- Part 1 134 134 ----------------------------------------- ··· 138 138 , C.border_gray_300 139 139 , C.flex 140 140 , C.flex_grow 141 + , C.h_12 141 142 , C.mt_px 143 + , C.px_1 142 144 , C.overflow_hidden 143 145 , C.relative 144 146 , C.text_gray_600 147 + 148 + -- Responsive 149 + ------------- 150 + , C.sm__h_auto 151 + , C.sm__px_0 145 152 146 153 -- Dark mode 147 154 ------------ ··· 152 159 -------- 153 160 slab 154 161 Html.input 155 - [ onBlur (TracksMsg Search) 162 + [ attribute "autocorrect" "off" 163 + , attribute "autocapitalize" "none" 164 + , onBlur (TracksMsg Search) 156 165 , onEnterKey (TracksMsg Search) 157 166 , onInput (TracksMsg << SetSearchTerm) 158 167 , placeholder "Search" ··· 190 199 , C.left_0 191 200 , C.ml_3 192 201 , C.mt_px 202 + , C.pl_1 193 203 , C.top_0 194 204 , C.z_0 205 + 206 + -- Responsive 207 + ------------- 208 + , C.sm__pl_0 195 209 ] 196 210 [ Icons.search 16 Inherit ] 197 211 ··· 203 217 , C.mr_3 204 218 , C.mt_px 205 219 , C.pt_px 220 + , C.space_x_4 221 + 222 + -- Responsive 223 + ------------- 224 + , C.sm__space_x_2 206 225 ] 207 226 [ -- 1 208 227 case searchTerm of ··· 212 231 , title "Clear search" 213 232 ] 214 233 [ C.cursor_pointer 215 - , C.ml_1 216 234 , C.mt_px 217 235 ] 218 236 [ Icons.clear 16 Inherit ] ··· 225 243 [ onClick (TracksMsg ToggleFavouritesOnly) 226 244 , title "Toggle favourites-only" 227 245 ] 228 - [ C.cursor_pointer 229 - , C.ml_1 230 - ] 246 + [ C.cursor_pointer ] 231 247 [ case favouritesOnly of 232 248 True -> 233 249 Icons.favorite 16 (Color UI.Kit.colorKit.base08) ··· 246 262 |> TracksMsg 247 263 |> onClick 248 264 ] 249 - [ C.ml_1, C.mr_px, C.cursor_pointer ] 265 + [ C.ml_6 266 + , C.mr_px 267 + , C.cursor_pointer 268 + ] 250 269 [ chunk 251 270 [ C.pl_1 ] 252 271 [ Icons.notes 18 Inherit ] ··· 260 279 |> TracksMsg 261 280 |> onClick 262 281 ] 263 - [ C.ml_1, C.mr_px, C.cursor_pointer ] 282 + [ C.cursor_pointer 283 + , C.mr_px 284 + ] 264 285 [ chunk 265 286 [ C.pl_1 ] 266 287 [ Icons.burst_mode 20 Inherit ] ··· 271 292 [ Mouse.onClick (TracksMsg << ShowViewMenu maybeGrouping) 272 293 , title "View settings" 273 294 ] 274 - [ C.cursor_pointer 275 - , C.ml_1 276 - ] 295 + [ C.cursor_pointer ] 277 296 [ Icons.more_vert 16 Inherit ] 278 297 279 298 -- 5 ··· 294 313 , C.duration_500 295 314 , C.font_bold 296 315 , C.leading_none 297 - , C.ml_1 298 316 , C.px_1 299 317 , C.py_1 300 318 , C.rounded ··· 353 371 , C.justify_center 354 372 , C.px_3 355 373 ] 356 - [ -- Add 357 - ------ 374 + [ ----------------------------------------- 375 + -- Add 376 + ----------------------------------------- 358 377 inline 359 - [ C.mb_3, C.mx_2, C.whitespace_no_wrap ] 378 + [ C.mb_4 379 + , C.mx_2 380 + , C.whitespace_no_wrap 381 + ] 360 382 [ UI.Kit.buttonLink 361 383 (Sources.NewOnboarding 362 384 |> Page.Sources ··· 370 392 ) 371 393 ] 372 394 395 + ----------------------------------------- 373 396 -- Demo 374 - ------- 397 + ----------------------------------------- 375 398 , inline 376 - [ C.mb_3, C.mx_2, C.whitespace_no_wrap ] 399 + [ C.mb_4 400 + , C.mx_2 401 + , C.whitespace_no_wrap 402 + ] 377 403 [ UI.Kit.buttonWithColor 378 404 UI.Kit.Gray 379 405 UI.Kit.Normal ··· 385 411 ) 386 412 ] 387 413 414 + ----------------------------------------- 388 415 -- How 389 - ------ 416 + ----------------------------------------- 390 417 , inline 391 - [ C.mb_3, C.mx_2, C.whitespace_no_wrap ] 418 + [ C.mb_4 419 + , C.mx_2 420 + , C.whitespace_no_wrap 421 + ] 392 422 [ UI.Kit.buttonWithOptions 393 423 Html.a 394 424 [ href "about"
+2 -2
src/Static/Html/Application.html
··· 11 11 <meta name="description" content="A music player that connects to your cloud/distributed storage, in the form of a static, serverless, web application." /> 12 12 13 13 <!-- Viewport --> 14 - <meta name="viewport" content="width=device-width, initial-scale=0.9" /> 14 + <meta name="viewport" content="width=device-width, initial-scale=1" /> 15 15 16 16 <!-- Favicons & Mobile --> 17 17 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" /> ··· 23 23 <meta name="theme-color" content="#8a90a9" /> 24 24 25 25 <!-- Stylesheets --> 26 - <link rel="stylesheet" href="application.css"> 26 + <link rel="stylesheet" href="application.css" /> 27 27 28 28 <!-- Preload some assets --> 29 29 <link rel="preload" href="images/diffuse__icon-dark.svg" as="image" crossorigin />