From e74485378ad7f07faa60920baabeaa5f7f894fcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ngo=CC=82=CD=98=20He=CC=82-bi=CC=81?= Date: Sun, 8 Aug 2021 03:42:29 +0800 Subject: [PATCH 1/3] Keng-sin email. --- imports/ui/pages/About.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/imports/ui/pages/About.js b/imports/ui/pages/About.js index 4dd11b8..2b5b80a 100644 --- a/imports/ui/pages/About.js +++ b/imports/ui/pages/About.js @@ -134,7 +134,7 @@ class About extends Component { - + @@ -241,7 +241,7 @@ class About extends Component {

- ngoohebi+chhoetaigi@gmail.com + taibunkesimi@gmail.com
From 44695a22cc3463de99259a47a6e1d15fcc98d144 Mon Sep 17 00:00:00 2001 From: miau715 Date: Mon, 9 Aug 2021 15:57:57 +0800 Subject: [PATCH 2/3] selective RWD for search result --- imports/api/utils/layout.js | 13 + imports/stylesheets/_footer.scss | 3 + imports/stylesheets/_header.scss | 2 + imports/stylesheets/_search-result.scss | 261 +++++++++++------- .../ui/search/components/DictionaryList.js | 35 ++- 5 files changed, 205 insertions(+), 109 deletions(-) create mode 100644 imports/api/utils/layout.js diff --git a/imports/api/utils/layout.js b/imports/api/utils/layout.js new file mode 100644 index 0000000..65eea3d --- /dev/null +++ b/imports/api/utils/layout.js @@ -0,0 +1,13 @@ +export const setLayout = (provider, layout) => { + provider.state.cookies.set('layout', layout); + provider.setState({ + layout: layout, + }); +} + +export const getLayout = (cookies) => { + let layout = cookies.get('layout'); + if (layout === undefined) + layout = 'new'; + return layout; +} \ No newline at end of file diff --git a/imports/stylesheets/_footer.scss b/imports/stylesheets/_footer.scss index b32c900..bdf6ac2 100644 --- a/imports/stylesheets/_footer.scss +++ b/imports/stylesheets/_footer.scss @@ -71,6 +71,9 @@ .site-footer__status { flex-direction: column; text-align: center; + > ul { + text-align: center; + } > ul:first-of-type { margin-bottom: 5px; } diff --git a/imports/stylesheets/_header.scss b/imports/stylesheets/_header.scss index fd7995d..eb989ac 100644 --- a/imports/stylesheets/_header.scss +++ b/imports/stylesheets/_header.scss @@ -90,6 +90,8 @@ main { @media screen and (max-width: 980px) { .site-header { height: 91px; + display: flex; + justify-content: center; h1 { padding-top: 10px; } diff --git a/imports/stylesheets/_search-result.scss b/imports/stylesheets/_search-result.scss index b5403ed..fdb502b 100644 --- a/imports/stylesheets/_search-result.scss +++ b/imports/stylesheets/_search-result.scss @@ -54,6 +54,33 @@ } } +.layout-select { + display: none; + width: clamp(290px, 90%, 420px); + margin: 20px auto -10px; + + button { + flex: 0 0 50%; + padding: 10px; + text-align: center; + border: #ddd 1px solid; + color: #888; + &:first-child { + border-right: #ddd 1px solid; + border-radius: 5px 0 0 5px; + } + &:last-child { + border-radius: 0 5px 5px 0; + border-left: none; + } + &.active { + background-color: $color--dark-main; + color: #fff; + border-color: $color--fade-dark-main; + } + } +} + .dic-block { margin-bottom: 50px; &__header { @@ -247,131 +274,155 @@ } @media screen and (max-width: 980px) { - .search-result { - &__dic-list { - display: none; - } - &__brief { - margin-top: 30px; - } + .layout-select { + display: flex; + justify-content: center; } - // for collapsing - .search-result--list { - .dic-block { - margin-bottom: 5px; - } - .dic-block__header { - display: flex; - justify-content: space-between; - align-items: center; - border: #ddd 1px solid; - padding: 5px 10px; - border-radius: 5px; - } - .dic-block__header.active { - background: $color--fade-main; - h2, h3 { - color: #fff; + body:not(.fixed-width) { + .search-result { + &__dic-list { + display: none; + } + &__brief { + margin-top: 20px; } } - .dic-block__header.active + .dic-block__content { - max-height: 10000px; - } - .dic-block__content { - max-height: 0; - overflow: hidden; - transition: max-height .3s ease-in; - } - } - .brief-table { - display: block; - &__narrow-title { - color: $color--fade-main; - display: block; - flex: 0 0 190px; - text-align: right; - margin-right: 5px; - } - &__detail { - a { - position: absolute; - background-color: $color--dark-main; - color: #fff; + // for collapsing + .search-result--list { + .dic-block { + margin-bottom: 5px; + } + .dic-block__header { + display: flex; + justify-content: space-between; + align-items: center; + border: #ddd 1px solid; padding: 5px 10px; border-radius: 5px; - right: 0; - top: 50%; - transform: translate(0, -50%); + } + .dic-block__header.active { + background: $color--fade-main; + h2, h3 { + color: #fff; + } + } + .dic-block__header.active + .dic-block__content { + max-height: 10000px; + } + .dic-block__content { + max-height: 0; + overflow: hidden; + transition: max-height .3s ease-in; } } - thead { - display: none; - } - tbody, tr { + .brief-table { display: block; + &__narrow-title { + color: $color--fade-main; + display: block; + flex: 0 0 190px; + text-align: right; + margin-right: 5px; + } + &__detail { + a { + position: absolute; + background-color: $color--dark-main; + color: #fff; + padding: 5px 10px; + border-radius: 5px; + right: 0; + top: 50%; + transform: translate(0, -50%); + } + } + thead { + display: none; + } + tbody, tr { + display: block; + } + tbody { + padding: 10px; + border-top: $color--table-border 1px solid; + } + tbody:first-of-type { + border-top: none; + } + tr { + position: relative; + padding-right: 60px; + } + tbody td { + display: flex; + border: none; + padding: 0; + } } - tbody { - padding: 10px; - border-top: $color--table-border 1px solid; - } - tbody:first-of-type { - border-top: none; - } - tr { - position: relative; - padding-right: 60px; - } - tbody td { - display: flex; - border: none; - padding: 0; + } + body.fixed-width { + .search-result { + .container { + width: 1024px; + padding: 0 15px; + } + &__dic-list { + width: 1024px; + } } } } @media screen and (max-width: 560px) { - .search-result--list { - .dic-block__header { - flex-direction: column; - align-items: stretch; - } - .dic-block__title { - text-align: left; - font-size: 18px; - } - .dic-block__counts { - text-align: right; + .layout-select { + button { + padding: 5px; } } - .brief-table { - &__narrow-title { - flex: 0 0 auto; - text-align: left; - } - &__detail { - a { - margin-top: 5px; - position: static; - transform: translate(0, 0); + body:not(.fixed-width) { + .search-result--list { + .dic-block__header { + flex-direction: column; + align-items: stretch; + } + .dic-block__title { + text-align: left; + font-size: 18px; + } + .dic-block__counts { + text-align: right; } } - tr { - padding-right: 0; - } - tbody td { - flex-direction: column; + .brief-table { + &__narrow-title { + flex: 0 0 auto; + text-align: left; + } + &__detail { + a { + margin-top: 5px; + position: static; + transform: translate(0, 0); + } + } + tr { + padding-right: 0; + } + tbody td { + flex-direction: column; + } } - } - .word-detail-table { - display: block; - border: $color--table-border 1px solid; - tbody, tr, th, td { + .word-detail-table { display: block; - width: 100%; - text-align: left; - } - th, td { - border: none; + border: $color--table-border 1px solid; + tbody, tr, th, td { + display: block; + width: 100%; + text-align: left; + } + th, td { + border: none; + } } } } \ No newline at end of file diff --git a/imports/ui/search/components/DictionaryList.js b/imports/ui/search/components/DictionaryList.js index 551ad1a..3c48ffe 100644 --- a/imports/ui/search/components/DictionaryList.js +++ b/imports/ui/search/components/DictionaryList.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Link, withRouter } from 'react-router-dom'; +import { withCookies } from 'react-cookie'; import { withLocalize } from "react-localize-redux"; import { Translate } from "react-localize-redux"; @@ -10,17 +11,22 @@ import dicStruct from '../../../api/dicts/dictionary-struct'; import BriefWord from './BriefWord'; import { LoadingIndicator } from './LoadingIndicator'; +import { setLayout, getLayout } from '../../../api/utils/layout'; class DictionaryList extends Component { constructor(props) { super(props); props.addTranslation(resultsTranslations); - + const { cookies } = props; + this.state = { - gotResult: false + gotResult: false, + layout: getLayout(cookies), + cookies: cookies }; + this.layoutApply(this.state.layout); this.handleScroll = this.handleScroll.bind(this); } @@ -39,7 +45,8 @@ class DictionaryList extends Component { handleScroll() { const sticky = document.getElementsByClassName('search-result__dic-list')[0]; - const stickyYPosition = parseInt(getComputedStyle(sticky).top.replace('px', '')); + const stickyYPosition = document.getElementsByClassName('site-header')[0].offsetHeight; + sticky.style.top = stickyYPosition + 'px'; if (sticky.getBoundingClientRect().top === stickyYPosition) { sticky.classList.add('pinned'); } @@ -69,6 +76,22 @@ class DictionaryList extends Component { event.preventDefault(); } + layoutChange(event) { + const layout = event.target.value; + setLayout(this, layout); + + this.layoutApply(layout); + } + + layoutApply(layout) { + if (layout === 'old') { + document.body.classList.add('fixed-width'); + } + else { + document.body.classList.remove('fixed-width'); + } + } + render() { let DICT_COUNT = 10; @@ -137,6 +160,10 @@ class DictionaryList extends Component { return (
+
+ + +
：{keywords} @@ -159,7 +186,7 @@ class DictionaryList extends Component { } } -export default withLocalize(withRouter(DictionaryList)); +export default withCookies(withLocalize(withRouter(DictionaryList))); class DictionaryBrief extends Component { constructor(props) { From ade2803f7fb91455132014579ed32d87c0e6f851 Mon Sep 17 00:00:00 2001 From: miau715 Date: Mon, 9 Aug 2021 18:06:06 +0800 Subject: [PATCH 3/3] disabled auto collapsing --- imports/ui/search/components/DictionaryList.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/imports/ui/search/components/DictionaryList.js b/imports/ui/search/components/DictionaryList.js index 3c48ffe..91d3077 100644 --- a/imports/ui/search/components/DictionaryList.js +++ b/imports/ui/search/components/DictionaryList.js @@ -213,15 +213,7 @@ class DictionaryBrief extends Component { toggleDicContent(event) { let currentHeader = event.currentTarget; if (window.getComputedStyle(currentHeader).display === 'flex') { - if (currentHeader.classList.contains('active')) { - currentHeader.classList.remove('active'); - } - else { - document.querySelectorAll('.dic-block__header').forEach(function(el) { - el.classList.remove('active'); - }); - currentHeader.classList.add('active'); - } + currentHeader.classList.toggle('active'); } }