From d5c5c0cefdffb1f12ed0e43e6be7c63242c38b9b Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 29 Oct 2024 06:05:32 -0400 Subject: [PATCH 1/5] apply new ui style to the reader interface --- apps/static/css/_components/uk-switch.scss | 2 +- apps/static/css/project.scss | 97 +++++++---------- apps/static/css/readux2/main.scss | 6 +- apps/static/css/readux2/reader.scss | 40 +++++++ apps/static/css/readux2/search.scss | 6 +- apps/static/js/vue-readux.js | 10 +- apps/templates/_home/_login_modal.html | 58 ++++++++++ apps/templates/_home/_nav.html | 60 +---------- apps/templates/_page/_information.html | 13 +-- apps/templates/_page/_navbar.html | 118 ++++++++++----------- apps/templates/page.html | 3 - 11 files changed, 217 insertions(+), 196 deletions(-) create mode 100644 apps/static/css/readux2/reader.scss create mode 100644 apps/templates/_home/_login_modal.html diff --git a/apps/static/css/_components/uk-switch.scss b/apps/static/css/_components/uk-switch.scss index f01db7b8..be3b2908 100644 --- a/apps/static/css/_components/uk-switch.scss +++ b/apps/static/css/_components/uk-switch.scss @@ -43,7 +43,7 @@ /* Slider active color */ input:checked+.uk-switch-slider { - background-color: $rx-color-accent-1 !important; + background-color: #1D3557 !important; } /* Pointer active animation */ diff --git a/apps/static/css/project.scss b/apps/static/css/project.scss index 25764038..89348dc0 100644 --- a/apps/static/css/project.scss +++ b/apps/static/css/project.scss @@ -38,9 +38,9 @@ em { filter: contrast(var(--contrast)); } -.uk-button-default { - font-size: 1.25rem; -} +// .uk-button-default { +// font-size: 1.25rem; +// } #search-form .uk-button-danger { background-color: #f0506e; @@ -835,13 +835,14 @@ p { font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace' !important; &:active { - background-color: $rx-color-accent-2 !important; - border: 1px solid $rx-color-accent-2 !important; + background-color: #1D3557 !important; + border: 1px solid #1D3557 !important; opacity: 1; } &:hover { - background: var(--link-color); + background: #1D3557; + border-color: #1D3557; color: white !important; font-size: 0.75rem; letter-spacing: 0.1rem; @@ -851,7 +852,8 @@ p { } .rx-action-btn:hover .rx-label-copy { - background: var(--link-color); + background: #1D3557; + border-color: #1D3557; color: white !important; font-size: 0.75rem; letter-spacing: 0.1rem; @@ -860,9 +862,9 @@ p { } .rx-label-solid { - background: var(--link-color); + background: #1D3557; color: white; - border: var(--link-color) 1px solid; + border: #1D3557 1px solid; font-size: 0.75rem; letter-spacing: 0.1rem; opacity: 0.75; @@ -871,13 +873,14 @@ p { font-weight: 600; &:active { - background-color: $rx-color-accent-2 !important; - border: 1px solid $rx-color-accent-2 !important; + background-color: darken(#1D3557, 5%) !important; + border: 1px solid darken(#1D3557, 5%) !important; opacity: 1; } &:hover { - background: var(--link-color); + background: #1D3557; + border-color: #1D3557; color: white !important; font-size: 0.75rem; letter-spacing: 0.1rem; @@ -1361,26 +1364,6 @@ fieldset { } } -// properly indent bullet items in the breadcrumb -.uk-navbar li { - text-indent: -1em !important; /* Negative indent to pull first line back */ - padding-left: 1em !important; /* Padding to offset the negative indent */ - - // &::marker { - // content: "↳ "; /* Custom bullet symbol */ - // position: absolute; - // left: 0; - // } -} - -.uk-navbar li:first-child { - // &::marker { - // content: ""; /* Custom bullet symbol */ - // position: absolute; - // left: 0; - // } -} - .long-and-truncated.rx-volume-title { display: flex; align-items: center; @@ -1671,20 +1654,20 @@ fieldset { color: white; } - &:active { - background-color: $rx-color-accent-2 !important; - border: 1px solid $rx-color-accent-2 !important; - opacity: 1; - } + // &:active { + // background-color: $rx-color-accent-2 !important; + // border: 1px solid $rx-color-accent-2 !important; + // opacity: 1; + // } - &:hover { - background: var(--link-color); - color: white !important; - font-size: 0.85rem; - letter-spacing: 0.1rem; - cursor: pointer; - opacity: 1; - } + // &:hover { + // background: var(--link-color); + // color: white !important; + // font-size: 0.85rem; + // letter-spacing: 0.1rem; + // cursor: pointer; + // opacity: 1; + // } } .rx-accordion-handle { @@ -1742,9 +1725,9 @@ a.nav-link { filter: contrast(var(--contrast)); } -.uk-button-default { - font-size: 1.25rem; -} +// .uk-button-default { +// font-size: 1.25rem; +// } .uk-tab > .uk-active > a { border-color: var(--link-color) !important; @@ -1792,9 +1775,9 @@ a.nav-link { bottom: 0px; /* background: none !important; */ - height: -webkit-calc(100% - 40px); - height: -moz-calc(100% - 40px); - height: calc(100% - 40px); + height: -webkit-calc(100% - 36px); + height: -moz-calc(100% - 36px); + height: calc(100% - 36px); width: 100%; /* Remove any browser-default margins. */ margin: 0; @@ -3614,26 +3597,26 @@ ol#search-results dl { /* Override the minus sign in UI Kit accordion */ .uk-open > .uk-accordion-title::before { - /* "-" Change the stroke color of the accordion icons to white */ - background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23950953%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E); + /* "-" Change the stroke color of the accordion icons to #1D3557 */ + background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E); } .uk-open > .uk-accordion-title:hover { - /* "-" Change the stroke color of the accordion icons to white */ + /* "-" Change the stroke color of the accordion icons to #1D3557 */ &::before { - background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E) + background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E) } } .uk-accordion-title::before { /* "+" Change the stroke color of the accordion icons to white */ - background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23950953%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23950953%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E); + background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E); } .uk-accordion-title:hover { /* "+" Change the stroke color of the accordion icons to white */ &::before { - background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23fff%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E); + background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%231D3557%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E); } } diff --git a/apps/static/css/readux2/main.scss b/apps/static/css/readux2/main.scss index a6d5e18e..aae8ea4c 100644 --- a/apps/static/css/readux2/main.scss +++ b/apps/static/css/readux2/main.scss @@ -596,4 +596,8 @@ iframe { .brand-tagline { font-size: small; color: white; -} \ No newline at end of file +} + +.unset-min-height { + min-height: unset !important; +} diff --git a/apps/static/css/readux2/reader.scss b/apps/static/css/readux2/reader.scss new file mode 100644 index 00000000..e403b8d8 --- /dev/null +++ b/apps/static/css/readux2/reader.scss @@ -0,0 +1,40 @@ +.reader-navbar { + padding: 0 1rem; height: 36px; +} + +.rx-accordion-head { + background-color: #F1FAEE; + color: #1D3557; + border: none; + &:hover { + color: #1D3557 !important; + background-color: darken(#F1FAEE, 5%) !important; + border: none; + .rx-accordion-head::before { + color: #1D3557 !important; + } + } + &:active { + border: none; + } +} + +.rx-accordion-head::before { + color: #1D3557 !important; +} + +.rx-anchor { + color: #1D3557 !important; +} + +.rx-btn { + &:hover { + background-color: #1D3557 !important; + border-color: #1D3557 !important; + } +} + +.uk-tab > .uk-active > a { + border-color: #1D3557 !important; + color: #1D3557 !important; +} \ No newline at end of file diff --git a/apps/static/css/readux2/search.scss b/apps/static/css/readux2/search.scss index 55d68a1e..9ab4938c 100644 --- a/apps/static/css/readux2/search.scss +++ b/apps/static/css/readux2/search.scss @@ -127,9 +127,9 @@ form#search-form input[type="search"][name="q"] { width: 100%; } -.uk-button-default { - font-size: 1.25rem; -} +// .uk-button-default { +// font-size: 1.25rem; +// } #search-grid { gap: 1.5rem; diff --git a/apps/static/js/vue-readux.js b/apps/static/js/vue-readux.js index e0bae8a9..837ba10b 100644 --- a/apps/static/js/vue-readux.js +++ b/apps/static/js/vue-readux.js @@ -182,7 +182,7 @@ Vue.component("v-volume-annotations", {
  • - Canvas {{ annotation.canvas__position }} ‧ {{annotation.canvas__position__count}} annotations + Canvas {{ annotation.canvas__position }} ‧ {{annotation.canvas__position__count}} annotations
    • @@ -244,7 +244,7 @@ Vue.component("v-info-content-url-single", {
    {{label}}
    - Copy @@ -273,7 +273,7 @@ Vue.component("v-info-content-url-unit", { {{url}}
    - Copy @@ -317,7 +317,7 @@ Vue.component("v-info-content-url-external", {
    {{label}}
    - Copy @@ -368,7 +368,7 @@ Vue.component("v-info-content-url-image-link", {
    {{label}}
    - Copy diff --git a/apps/templates/_home/_login_modal.html b/apps/templates/_home/_login_modal.html new file mode 100644 index 00000000..2771feaf --- /dev/null +++ b/apps/templates/_home/_login_modal.html @@ -0,0 +1,58 @@ + +
    +
    + + +
    +

    Log in to Readux

    +
    + + +
    + +
    +
    + + +
    +
    + + +
    + +
    + + +
    +
    + Forgot Password? + New User? +
    +
    + + +
    + + +
    Login via one of the following services:
    + + +
    +
    + + + +
    +
    + + +
    Need help? Contact us
    +
    +
    +
    \ No newline at end of file diff --git a/apps/templates/_home/_nav.html b/apps/templates/_home/_nav.html index 2f7fe078..1eeb153a 100644 --- a/apps/templates/_home/_nav.html +++ b/apps/templates/_home/_nav.html @@ -32,65 +32,7 @@
    - - -
    -
    - - -
    -

    Log in to Readux

    -
    - - -
    - -
    -
    - - -
    -
    - - -
    - -
    - - -
    -
    - Forgot Password? - New User? -
    -
    - - -
    - - -
    Login via one of the following services:
    - - -
    -
    - - - -
    -
    - - -
    Need help? Contact us
    -
    -
    -
    +{% include '_home/_login_modal.html' %} +
    CSV (TODO) @@ -22,7 +22,8 @@
    - + --> +
    • @@ -107,7 +108,7 @@ {# Advanced fields: custom metadata configured via django settings #} {% if custom_metadata %}
    • - Advanced + Advanced
      {% for key, value in custom_metadata.items %}
      @@ -120,7 +121,7 @@ {% endif %}
    • - Attribution + Attribution
      Institution
      diff --git a/apps/templates/_page/_navbar.html b/apps/templates/_page/_navbar.html index 46a467ef..8b58f7e7 100644 --- a/apps/templates/_page/_navbar.html +++ b/apps/templates/_page/_navbar.html @@ -1,71 +1,67 @@ {% load static i18n %} +{% load sass_tags %} + + + -
    - -
    -
    - -
    -

    - {% if user.is_authenticated %} - Connect Accounts - {% else %} - Sign in - {% endif %} -

    -
    - {% include "snippets/socialaccount_buttons.html" %} -
    -
    - +{% include '_home/_login_modal.html' %} \ No newline at end of file diff --git a/apps/templates/page.html b/apps/templates/page.html index d473bc89..ed2779cd 100644 --- a/apps/templates/page.html +++ b/apps/templates/page.html @@ -105,7 +105,6 @@ function toggleOCR() { // this requires testing const nodeList = document.querySelectorAll("div.openseadragon-canvas div span"); - debugger; for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = nodeList[i].style.backgroundColor != "white" ? "white" : "transparent"; nodeList[i].style.fontWeight = nodeList[i].style.fontWeight != "bold" ? "bold":""; @@ -115,7 +114,6 @@ function showOCR() { const nodeList = document.querySelectorAll("div.openseadragon-canvas div span"); - debugger; for (let i = 0; i < nodeList.length; i++) { nodeList[i].style.backgroundColor = "white"; nodeList[i].style.fontWeight = "bold"; @@ -125,7 +123,6 @@ function hideOCR() { const nodeList2 = document.querySelectorAll("div.openseadragon-canvas div span"); - debugger; for (let i = 0; i < nodeList2.length; i++) { nodeList2[i].style.backgroundColor = "transparent"; nodeList2[i].style.fontWeight = ""; From 770d6405f693428012a3deb153ec554ad0d7e16b Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 29 Oct 2024 06:20:46 -0400 Subject: [PATCH 2/5] fix the toggleOCR out of sync bug --- apps/templates/page.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/apps/templates/page.html b/apps/templates/page.html index ed2779cd..671c81a1 100644 --- a/apps/templates/page.html +++ b/apps/templates/page.html @@ -104,11 +104,18 @@ function toggleOCR() { // this requires testing + const ocrCheckbox = document.querySelector("#ocr-overlay"); const nodeList = document.querySelectorAll("div.openseadragon-canvas div span"); for (let i = 0; i < nodeList.length; i++) { - nodeList[i].style.backgroundColor = nodeList[i].style.backgroundColor != "white" ? "white" : "transparent"; - nodeList[i].style.fontWeight = nodeList[i].style.fontWeight != "bold" ? "bold":""; - nodeList[i].style.color = nodeList[i].style.color != "rgb(149, 9, 83)" ? "rgb(149, 9, 83)" : "transparent"; + if (ocrCheckbox.checked) { + nodeList[i].style.backgroundColor = "white"; + nodeList[i].style.fontWeight = "bold"; + nodeList[i].style.color = "rgb(149, 9, 83)"; + } else { + nodeList[i].style.backgroundColor = "transparent"; + nodeList[i].style.fontWeight = ""; + nodeList[i].style.color = "transparent"; + } } } From f4cd73f1ffbc0bdeef775dd81503ce94e658bb0b Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 29 Oct 2024 06:40:53 -0400 Subject: [PATCH 3/5] replace light blue border of search box with accent blue --- apps/static/css/readux2/reader.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/static/css/readux2/reader.scss b/apps/static/css/readux2/reader.scss index e403b8d8..e34da8fb 100644 --- a/apps/static/css/readux2/reader.scss +++ b/apps/static/css/readux2/reader.scss @@ -37,4 +37,8 @@ .uk-tab > .uk-active > a { border-color: #1D3557 !important; color: #1D3557 !important; +} + +.uk-search-default .uk-search-input:focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus { + border-color: #1D3557; } \ No newline at end of file From 4d7352361ea56ea44ea6c37ef7a9e2767658e1f5 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 29 Oct 2024 06:41:35 -0400 Subject: [PATCH 4/5] remove uk-button-default style in collection.scss --- apps/static/css/readux2/collection.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/static/css/readux2/collection.scss b/apps/static/css/readux2/collection.scss index 6c68ddfb..5e72ba64 100644 --- a/apps/static/css/readux2/collection.scss +++ b/apps/static/css/readux2/collection.scss @@ -38,11 +38,12 @@ justify-content: center; transition: background-color 0.3s ease; } -.uk-button-default { - background-color: #222; /* Removed gradient background */ - border: none; - color: white; -} + +// .uk-button-default { +// background-color: #222; /* Removed gradient background */ +// border: none; +// color: white; +// } .modal-bg { background-size: cover; From 44c8520d4842e6036d426b7e1ef250a28c9d2fa8 Mon Sep 17 00:00:00 2001 From: Y Date: Tue, 29 Oct 2024 06:50:54 -0400 Subject: [PATCH 5/5] update button styles --- apps/static/css/readux2/login.scss | 3 +++ apps/static/css/readux2/search.scss | 6 ------ apps/templates/search_results.html | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/static/css/readux2/login.scss b/apps/static/css/readux2/login.scss index b3100ac2..8d2bbdc5 100644 --- a/apps/static/css/readux2/login.scss +++ b/apps/static/css/readux2/login.scss @@ -64,4 +64,7 @@ .sign-in-btn { background-color: #1D3557; color: #F1FAEE; + &:hover { + background-color: darken(#1D3557, 10%); + } } \ No newline at end of file diff --git a/apps/static/css/readux2/search.scss b/apps/static/css/readux2/search.scss index 9ab4938c..7e34daf2 100644 --- a/apps/static/css/readux2/search.scss +++ b/apps/static/css/readux2/search.scss @@ -233,12 +233,6 @@ ol#search-results dl { background-color: #1D3557 !important; } -#reset-filters { - &:hover { - background-color: darken(#EFEFEF, 10%); - } -} - .uk-search-default .uk-search-input:focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: #1D3557; } diff --git a/apps/templates/search_results.html b/apps/templates/search_results.html index f699b007..e2b37365 100644 --- a/apps/templates/search_results.html +++ b/apps/templates/search_results.html @@ -146,7 +146,7 @@ {% endfor %}
    - +