From d8306559fd678f31e40cd7a480abbd96efb8bd0c Mon Sep 17 00:00:00 2001 From: Ramires Viana <59319979+ramiresviana@users.noreply.github.com> Date: Wed, 3 Mar 2021 12:25:59 +0000 Subject: [PATCH] chore: breadcrumbs component --- frontend/public/themes/dark.css | 7 ++- frontend/src/components/Breadcrumbs.vue | 67 +++++++++++++++++++++++++ frontend/src/css/base.css | 12 ++--- frontend/src/css/styles.css | 8 ++- frontend/src/views/Files.vue | 46 ++--------------- frontend/src/views/Share.vue | 47 +++-------------- frontend/src/views/files/Editor.vue | 13 ++--- 7 files changed, 97 insertions(+), 103 deletions(-) create mode 100644 frontend/src/components/Breadcrumbs.vue diff --git a/frontend/public/themes/dark.css b/frontend/public/themes/dark.css index cba3e740..4e3c6f5f 100644 --- a/frontend/public/themes/dark.css +++ b/frontend/public/themes/dark.css @@ -69,13 +69,16 @@ nav > div { border-color: var(--divider); } -#breadcrumbs { +.breadcrumbs { border-color: var(--divider); color: var(--textPrimary) !important; } -#breadcrumbs span { +.breadcrumbs span { color: var(--textPrimary) !important; } +.breadcrumbs a:hover { + background-color: rgba(255, 255, 255, .1); +} #listing .item { background: var(--surfacePrimary); diff --git a/frontend/src/components/Breadcrumbs.vue b/frontend/src/components/Breadcrumbs.vue new file mode 100644 index 00000000..43ade6a3 --- /dev/null +++ b/frontend/src/components/Breadcrumbs.vue @@ -0,0 +1,67 @@ + +
+ + + + + \ No newline at end of file diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css index 552fa691..bf34798b 100644 --- a/frontend/src/css/base.css +++ b/frontend/src/css/base.css @@ -83,29 +83,29 @@ main { width: calc(100% - 19em); } -#breadcrumbs { +.breadcrumbs { height: 3em; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } -#breadcrumbs span, -#breadcrumbs { +.breadcrumbs span, +.breadcrumbs { display: flex; align-items: center; color: #6f6f6f; } -#breadcrumbs a { +.breadcrumbs a { color: inherit; transition: .1s ease-in; border-radius: .125em; } -#breadcrumbs a:hover { +.breadcrumbs a:hover { background-color: rgba(0,0,0, 0.05); } -#breadcrumbs span a { +.breadcrumbs span a { padding: .2em; } diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css index c265c483..3b2df8d7 100644 --- a/frontend/src/css/styles.css +++ b/frontend/src/css/styles.css @@ -220,15 +220,19 @@ height: calc(100vh - 8.4em); } -#editor-container #breadcrumbs { +#editor-container .breadcrumbs { height: 2.3em; padding: 0 1em; } -#editor-container #breadcrumbs span { +#editor-container .breadcrumbs span { font-size: 12px; } +#editor-container .breadcrumbs i { + font-size: 16px; +} + /* * * * * * * * * * * * * * * * * PROMPT * * * * * * * * * * * * * * * * */ diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue index 934d9cc7..5b247cbb 100644 --- a/frontend/src/views/Files.vue +++ b/frontend/src/views/Files.vue @@ -2,16 +2,7 @@