Moved things into cards

This commit is contained in:
idonahue 2023-04-28 19:14:08 +02:00
parent b6b23d388a
commit bfa191572c
5 changed files with 17 additions and 23 deletions

View File

@ -67,22 +67,19 @@ input:focus {
height: 0;
}
/* Side Bar */
.side-panel {
@apply h-full w-[424px] border-r border-zinc-700;
}
/* Main Content Container */
.main-content-container {
@apply flex flex-col h-full w-2/3 flex-auto;
@apply flex h-full w-2/3 flex-auto flex-col;
}
/* Card Styling */
.card {
@apply rounded border-[0.5px] border-gb-700 bg-card-default
@apply rounded border-[0.5px] border-gb-700 bg-card-default shadow;
}
/* Text Editor */

View File

@ -90,7 +90,7 @@
<ul class="mx-1 flex flex-auto flex-col overflow-auto">
{#each $recentActivity as activity}
<li
class="mb-2 ml-3 mr-1 flex flex-col gap-2 rounded border border-zinc-700 bg-[#2F2F33] p-3 text-zinc-400"
class="card mb-2 ml-3 mr-1 flex flex-col gap-2 p-3 text-zinc-400"
>
<div class="flex flex-row justify-between text-zinc-500">
<span>

View File

@ -52,7 +52,7 @@
{#each $fileDeltasByDate as [date, fileDeltas, largestBucketSize]}
<li
class="card changed-day-card flex flex-col rounded border-[0.5px] border-gb-700 bg-card-default"
class="card changed-day-card flex flex-col"
>
<header
class="header flex flex-row justify-between gap-2 rounded-tl rounded-tr border-b-gb-700 bg-card-active px-3 py-2"
@ -73,7 +73,7 @@
{#each Object.entries(fileDeltas) as [filepath, deltas]}
<li class="changed-file flex items-center justify-between gap-4 ">
<a
class="file-name flex w-full max-w-[360px] overflow-auto py-2 font-mono hover:underline max-w-"
class="file-name max-w- flex w-full max-w-[360px] overflow-auto py-2 font-mono hover:underline"
href="/projects/{projectId}/player/{format(
date,
'yyyy-MM-dd'

View File

@ -227,7 +227,7 @@
<form on:submit|preventDefault={onCommit} class="flex h-full flex-col gap-4 px-4">
<h1 class="pt-2 text-2xl font-bold">Commit</h1>
<ul
class="flex h-full w-full flex-col overflow-auto rounded border border-gb-700 bg-card-default"
class="card flex h-full w-full flex-col overflow-auto"
>
<header class="flex w-full items-center rounded-tl rounded-tr bg-card-active p-2">
<input
@ -367,15 +367,10 @@
</div>
<div class="main-content-container">
<div
id="preview"
class="card relative m-2 flex flex-col overflow-auto h-full "
>
<div id="preview" class="card relative m-2 flex h-full flex-col overflow-auto ">
{#if $selectedDiffPath}
{#if $selectedDiff}
<header class="flex items-center gap-3 bg-card-active px-3 py-2">
<span>{$selectedDiffPath}</span>
<header class="flex items-center gap-3 bg-card-active pl-2 pr-3 py-2">
<div class="flex items-center gap-1">
<button
on:click={selectPreviousFile}
@ -396,6 +391,8 @@
<IconChevronDown class="h-4 w-4" />
</button>
</div>
<span>{$selectedDiffPath}</span>
</header>
<div id="code" class="flex-auto overflow-auto px-2">
@ -412,12 +409,12 @@
id="controls"
class="absolute bottom-0 flex w-full flex-col gap-4 overflow-hidden rounded-br rounded-bl border-t border-zinc-700 bg-[#2E2E32]/75 p-2 pt-4"
style="
border-width: 0.5px;
-webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.60);
border: 0.5px solid rgba(63, 63, 70, 0.50);
"
border-width: 0.5px;
-webkit-backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
backdrop-filter: blur(5px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.60);
border: 0.5px solid rgba(63, 63, 70, 0.50);
"
>
<div class="align-center flex flex-row-reverse gap-2">
<button class="checkbox-button">

View File

@ -65,7 +65,7 @@
class:text-white={date === $currentDate}
class:border-zinc-700={date !== $currentDate}
class:bg-card-default={date !== $currentDate}
class="calendar-card max-h-content flex w-full flex-col items-center justify-around rounded border-[0.5px] border-gb-700 p-2 text-zinc-300 shadow transition duration-150 ease-out hover:ease-in"
class="card max-h-content flex w-full flex-col items-center justify-around p-2 text-zinc-300 shadow transition duration-150 ease-out hover:ease-in"
>
{#if isToday}
<div class="py-2 text-lg leading-5">Today</div>