David/meilisearch-admin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add styles for index page

Browse source
This commit is contained in:
Stanislav Romanov 2022-09-09 14:04:38 +03:00
parent 0b533834f3
commit fc53449cad
8 changed files with 19 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/assets/styles.css
View file

@ -52,15 +52,13 @@
}
.royal-table {
@apply table-auto border text-left mb-4;
@apply table-auto text-left mb-4;
thead {
@apply bg-base-4;
tr {
@apply border-b;
th {
@apply bg-base-6;
@apply first:rounded-l last:rounded-r;
@apply px-4 py-4 text-base-2 font-normal whitespace-nowrap;
&[type='button'] {
@ -79,12 +77,8 @@
tbody {
tr {
&:nth-child(even) {
@apply bg-base-4;
}
td {
@apply px-4 py-2 text-base-6 align-top;
@apply px-4 py-3 align-top;
}
}
}

2
app/components/headers/h1.hbs
View file

@ -1,4 +1,4 @@
<h1 class='text-3xl mb-4' ...attributes>
<h1 class='text-base-1 text-3xl mb-4' ...attributes>
{{#if (has-block)}}
{{yield}}
{{else}}

2
app/components/headers/h2.hbs
View file

@ -1,4 +1,4 @@
<h2 class='text-2xl mb-4' ...attributes>
<h2 class='text-base-1 text-2xl mb-4' ...attributes>
{{#if (has-block)}}
{{yield}}
{{else}}

6
app/components/stat.hbs
View file

@ -1,14 +1,14 @@
<div
class='px-4 py-5 base-7 shadow rounded-lg overflow-hidden sm:p-6'
class='px-4 py-5 bg-base-6 rounded overflow-hidden sm:p-6'
...attributes
>
<div class='flex items-center'>
<div class="mr-2">{{yield to='icon'}}</div>
<div>
<dt class='text-sm font-medium text-base-3 truncate'>
<dt class='text-sm font-medium text-base-2 truncate'>
{{@title}}
</dt>
<dd class='text-3xl font-semibold text-base-3'>
<dd class='text-3xl font-semibold text-base-1'>
{{#if (has-block)}}
{{yield}}
{{else}}

4
app/components/theme-toggler.hbs
View file

@ -1,4 +1,4 @@
<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-5'>
<div class='grid grid-cols-3 gap-1 p-1 rounded bg-base-6'>
{{#each this.themes as |item|}}
{{#let (eq item.id this.theme) as |selected|}}
<Button
@ -6,7 +6,7 @@
@icon={{item.icon}}
@onClick={{fn this.changeTheme item.id}}
@size='sm'
class='border-none {{if selected "base-7 shadow-sm"}}'
class='border-none {{if selected "bg-base-7 shadow-sm"}}'
/>
{{/let}}
{{/each}}

11
app/templates/admin/index.hbs
View file

@ -6,7 +6,7 @@
@value={{format-bytes @model.stats.databaseSize}}
>
<:icon>
<Icons::DatabaseOutline @size={{40}} />
<Icons::DatabaseOutline @size={{40}} class='fill-base-2' />
</:icon>
</Stat>
<Stat
@ -14,15 +14,12 @@
@value={{date-time-format @model.stats.lastUpdate}}
>
<:icon>
<Icons::Calendar @size={{40}} />
<Icons::Calendar @size={{40}} class='fill-base-2' />
</:icon>
</Stat>
<Stat
@title='The version of the Meilisearch instance'
@value={{@model.version.pkgVersion}}
>
<Stat @title='The version' @value={{@model.version.pkgVersion}}>
<:icon>
<Icons::SourceBranch @size={{40}} />
<Icons::SourceBranch @size={{40}} class='fill-base-2' />
</:icon>
</Stat>
</dl>

2
app/templates/login.hbs
View file

@ -1,6 +1,6 @@
<div class='min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8'>
<div class='sm:mx-auto sm:w-full sm:max-w-md'>
<div class='base-7 py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
<div class='bg-base-7 py-8 px-4 shadow sm:rounded-lg sm:px-10 mb-6'>
<form class='space-y-6' {{on 'submit' this.authenticate}}>
<Headers::H1 class='text-center' @title="MeiliAdmin"/>

4
config/tailwind.config.js
View file

@ -5,7 +5,9 @@ module.exports = {
darkMode: 'media',
theme: {
extend: {
borderColor: (theme) => theme('colors.base.5'),
borderColor: ({ theme }) => ({
DEFAULT: theme('colors.base.5'),
}),
colors: {
base: {
1: 'rgb(var(--color-base-1) / <alpha-value>)',