Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
796 changes: 380 additions & 416 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions src/components/Collections.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@
<form
v-if="notSelectedCollections.length > 0"
@submit.prevent="addCollection"
class="flow flow--small"
class="flow"
:disabled="form.inProgress()"
>
<div v-if="fillMode === 'select'" class="flow flow--smaller">
<div v-if="fillMode === 'select'" class="form-group">
<div class="cols cols--always cols--center cols--gap-smaller">
<label for="collection-select" class="col--extend">
{{ t('collection.add_to_collection') }}
Expand Down Expand Up @@ -79,7 +79,7 @@
</select>
</div>

<div v-else class="flow flow--smaller">
<div v-else class="form-group">
<div class="cols cols--always cols--center cols--gap-smaller">
<label for="collection-name" class="col--extend">
{{ t('collection.name') }}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Notes.vue
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@

<form
@submit.prevent="addNote"
class="flow flow--small"
class="flow"
:disabled="form.inProgress()"
>
<p v-if="form.isInvalid('@base')" class="form-group__error" role="alert">
{{ t('forms.error') }}
{{ form.error('@base') }}
</p>

<div class="flow flow--smaller">
<div class="form-group">
<label for="note-content">
{{ t('notes.content') }}
</label>
Expand Down
4 changes: 2 additions & 2 deletions src/screens/FeedsScreen.vue
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@

<form
@submit.prevent="testUrl"
class="flow flow--small"
class="flow"
:disabled="form.inProgress()"
>
<div class="flow flow--smaller">
<div class="form-group">
<label for="url">
{{ t('feeds.url_potential_feed') }}
</label>
Expand Down
4 changes: 2 additions & 2 deletions src/screens/LinkScreen.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
</span>
</p>

<div v-if="link.tags">
<span v-for="tag in link.tags" class="tag badge badge--accent">#{{ tag }}</span>
<div v-if="link.tags" class="stack stack--gap-smaller">
<span v-for="tag in link.tags" class="badge badge--tag">#{{ tag }}</span>
</div>
</div>

Expand Down
11 changes: 6 additions & 5 deletions src/screens/LoginScreen.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,13 @@
</div>
</div>

<form @submit.prevent="login" class="flow flow--small">
<form @submit.prevent="login" class="flow">
<p v-if="form.isInvalid('@base')" class="form-group__error" role="alert">
{{ t('forms.error') }}
{{ form.error('@base') }}
</p>

<div class="flow flow--smaller">
<div class="form-group">
<label for="login-email">
{{ t('login.email.label') }}
</label>
Expand All @@ -54,7 +54,7 @@
>
</div>

<div class="flow flow--smaller">
<div class="form-group">
<label for="login-password">
{{ t('login.password.label') }}
</label>
Expand All @@ -74,7 +74,7 @@
>
</div>

<div v-if="displayServerInput" class="flow flow--smaller">
<div v-if="displayServerInput" class="form-group">
<label for="login-server">
{{ t('login.server.label') }}
</label>
Expand All @@ -100,8 +100,9 @@

<div class="flow flow--small text--center">
<div>
<button class="button--primary button--big" :disabled="form.inProgress()">
<button class="button--primary button--big button--animated" :disabled="form.inProgress()">
{{ t("login.submit") }}
<Icon name="arrow-right" />
</button>
</div>

Expand Down
14 changes: 7 additions & 7 deletions src/screens/Screen.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
<div class="screen">
<header v-if="header" class="screen__header panel panel--gable cols cols--always cols--center">
<div class="col--extend">
<a class="screen__logo" href="#/">
<img v-if="currentPath == '/'" :src="logo" alt="Flus" height="32">
<span v-else>
<Icon name="arrow-left" />
{{ t("menu.back") }}
</span>
<a v-if="currentPath == '/'" class="screen__logo" href="#/">
<img :src="logo" alt="Flus" height="32">
</a>
<a v-else class="button button--ghost button--big button--animated" href="#/">
<Icon name="arrow-left" />
{{ t("menu.back") }}
</a>
</div>

Expand Down Expand Up @@ -55,7 +55,7 @@
</div>
</header>

<main role="main" :class="{ 'panel': true, 'screen__body': true, 'panel--gable': store.menuOpened }">
<main role="main" :class="{ 'screen__body': true, 'screen__body--menu': store.menuOpened }">
<span
ref="title"
tabindex="-1"
Expand Down
6 changes: 3 additions & 3 deletions src/screens/SettingsScreen.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@

<template>
<Screen :title="title" header>
<form @submit.prevent="save" class="flow flow--small">
<form @submit.prevent="save" class="flow">
<p v-if="form.isInvalid('@base')" class="form-group__error" role="alert">
{{ t('forms.error') }}
{{ form.error('@base') }}
</p>

<div class="flow flow--smaller">
<div class="form-group">
<label for="settings-language">
{{ t('settings.language.label') }}
</label>
Expand All @@ -32,7 +32,7 @@
</select>
</div>

<div class="flow flow--smaller">
<div class="form-group">
<label for="settings-theme">
{{ t('settings.theme.label') }}
</label>
Expand Down
22 changes: 9 additions & 13 deletions src/stylesheets/application.css
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,16 @@ body {
}

.screen__body {
padding: var(--space-medium);

flex: 1;

background-color: var(--color-background);
}

.screen__body--menu {
color: var(--color-pampas);
background-color: var(--color-gable);
}

.notification {
Expand All @@ -65,19 +74,6 @@ body {
border-top: 1px solid var(--color-grey-line);
}

.tag {
display: inline-block;
margin-right: var(--space-smaller);
margin-bottom: var(--space-smaller);
}

button[aria-expanded="true"],
button[aria-expanded="true"]:hover {
--button-color: var(--color-grey-base);
--button-background-color: var(--color-grey-text-contrast);
--button-border-color: transparent;
}

textarea {
min-height: 6.5rem;
}