sprechtl/PomeloNote
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bissl styling bei listing

Browse source
This commit is contained in:
dhain 2022-09-28 10:59:17 +02:00
parent fe1d24a23e
commit 6da2807b0a
2 changed files with 32 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/svelte/src/routes/+page.svelte
View file

@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import type {Note} from "../models/types"; import type {Note} from "../models/types";
import {bearerFetch, jwt} from "../models/PomeloUtils";
import {onMount} from "svelte"; import {onMount} from "svelte";
const endpoint = "/notes"; const endpoint = "/notes";
//:TODO TEMP!!! //:TODO TEMP!!!
const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}}]"; const jsonStr = "[{\"id\":0,\"attributes\":{\"title\":\"mike\",\"content\":\"C Moasta\",\"lastViewed\":\"2022-09-27\"}},{\"id\":1,\"attributes\":{\"title\":\"samc\",\"content\":\"drupal gott\",\"lastViewed\":\"1999-09-09\"}},{\"id\":2,\"attributes\":{\"title\":\"DIO\",\"content\":\"in all CAPS\",\"lastViewed\":\"2022-09-27\"}},{\"id\":3,\"attributes\":{\"title\":\"Eren\",\"content\":\"Jäger\",\"lastViewed\":\"2022-09-27\"}},{\"id\":4,\"attributes\":{\"title\":\"stow\",\"content\":\"Beitn Chef\",\"lastViewed\":\"2022-09-27\"}},{\"id\":5,\"attributes\":{\"title\":\"Wonder of U\",\"content\":\"Umm... so, personally... this is the first time this has happened, so I'm a bit surprised. Only a centimeter away... I mean, I don't think there's ever been someone who's gotten that close to me... without a, you know... calamity occurring. I'm not really... not really sure what happens at one centimeter away... 'cause it's my first time. I don't really understand it either. Seriously. But in the flow of calamity... there's nobody who can attack me. Not a single person. That, I know for sure. Wonder of U.\",\"lastViewed\":\"2022-09-27\"}}]";
//:TODO TEMP!!! //:TODO TEMP!!!
let notes: Note[] = JSON.parse(jsonStr); let notes: Note[] = JSON.parse(jsonStr);
@ -98,6 +97,7 @@
*/ */
function onNoteLiClick(note) { function onNoteLiClick(note) {
window.location = "/editor"; window.location = "/editor";
note.attributes.lastViewed = new Date().toISOString();
} }
</script> </script>
@ -113,12 +113,15 @@
</head> </head>
<body> <body>
<div class="container">
<div class="row"> <div class="row">
<!-- Add Note Button --> <!-- Add Note Button -->
<div class="offset-md-7 col-md-1"> <div class="offset-md-7 col-md-1">
<button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button> <button class="btn btn-primary" on:click={() => addNotePrompt()}>Add Note</button>
</div> </div>
</div>
<div class="row">
<div class="offset-md-4 col-md-4"> <div class="offset-md-4 col-md-4">
{#if notes.length !== 0} {#if notes.length !== 0}
<!-- Notes listing --> <!-- Notes listing -->
@ -127,13 +130,16 @@
<li on:mouseover={() => handleMouseOverLi(note.id)} <li on:mouseover={() => handleMouseOverLi(note.id)}
on:mouseout={() => handleMouseOutLi(note.id)}> on:mouseout={() => handleMouseOutLi(note.id)}>
<div class="row"> <div class="row">
<div class="col-md-10" on:click={() => onNoteLiClick(note)}> <div class="col-10" on:click={() => onNoteLiClick(note)}>
<span> <div>
{note.attributes.title} <br/> {note.attributes.title}
{note.attributes.lastViewed}
</span>
</div> </div>
<div class="col-md-1"> <div class="list-date-text">
{note.attributes.lastViewed}
</div>
</div>
<div class="col-1">
<button style="display: none" id={"noteButton" + note.id} <button style="display: none" id={"noteButton" + note.id}
on:click={() => removeNotePrompt(note)}> on:click={() => removeNotePrompt(note)}>
<i class="bi bi-x"></i> <i class="bi bi-x"></i>
@ -146,6 +152,7 @@
{/if} {/if}
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>
@ -153,6 +160,7 @@
html, html,
:root { :root {
--main-txt-color: black; --main-txt-color: black;
--sub-txt-color: gray;
--cross-txt-color: red; --cross-txt-color: red;
--color-primary: #fff494; --color-primary: #fff494;
@ -169,19 +177,23 @@
background-color: #ffffff; background-color: #ffffff;
} }
a {
color: var(--main-txt-color);
text-decoration: none;
}
li { li {
list-style: none; list-style: none;
padding: 6px 10px; padding: 6px 10px;
margin-bottom: 5px;
margin-top: 5px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
border-radius: 10px;
border-bottom-color: var(--color-primary-900); border-bottom-color: var(--color-primary-900);
border-top-color: var(--color-primary-900);
background-color: var(--color-primary-600); background-color: var(--color-primary-600);
} }
li:hover {
background-color: var(--color-primary-700);
}
li button { li button {
float: right; float: right;
border: none; border: none;
@ -190,10 +202,11 @@
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
transform: scale(1.5);
} }
li button:hover { li button:hover {
transform: scale(1.7); transform: scale(2);
} }
li:last-child { li:last-child {
@ -219,4 +232,8 @@
border: var(--color-primary-900); border: var(--color-primary-900);
color: var(--main-txt-color); color: var(--main-txt-color);
} }
.list-date-text {
color: var(--sub-txt-color);
}
</style> </style>

2
frontend/svelte/src/routes/+page.ts
View file

@ -1,5 +1,5 @@
import {bearerFetch, jwt} from "../models/PomeloUtils"; import {bearerFetch, jwt} from "../models/PomeloUtils";
//
// /** @type {import('./$types').PageLoad} */ // /** @type {import('./$types').PageLoad} */
// export async function load() { // export async function load() {
// let invalid = !jwt; // let invalid = !jwt;