From fd633cb64b31df0c78157adfd69b992a9ace8920 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 18 May 2022 22:05:24 +0500 Subject: [PATCH] styling corrections, a tag corrected --- src/helpers/TableSearch.js | 4 +- src/pages/Regulations.js | 175 +++++++++++++++----------------- src/pages/Service.js | 194 ++++++++++++++++-------------------- src/pages/Service_bottom.js | 145 ++++++++++++--------------- src/styles/_main.scss | 33 ++++-- 5 files changed, 261 insertions(+), 290 deletions(-) diff --git a/src/helpers/TableSearch.js b/src/helpers/TableSearch.js index 6996dfc..fe74a0a 100644 --- a/src/helpers/TableSearch.js +++ b/src/helpers/TableSearch.js @@ -1,8 +1,8 @@ export const tableSearch = (word, tableRef) => { // Declare variables - let table, tr, td, i, txtValue; + let table, tr, i, txtValue; word = word.toUpperCase(); - table = document.querySelector('.' + tableRef); + table = document.querySelector("." + tableRef); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query diff --git a/src/pages/Regulations.js b/src/pages/Regulations.js index f97211b..0d376a1 100644 --- a/src/pages/Regulations.js +++ b/src/pages/Regulations.js @@ -1,29 +1,18 @@ // IMPORT MODULES import React from "react"; -import { withTranslation } from 'react-i18next'; -import parse from 'html-react-parser'; -import i18n from '../i18n'; +import { withTranslation } from "react-i18next"; +import parse from "html-react-parser"; +import i18n from "../i18n"; // SEARCH -import { tableSearch } from '../helpers/TableSearch'; - +import { tableSearch } from "../helpers/TableSearch"; // IMPORT COMPONENTS import Breadcrumb from "../components/Global/Breadcrumb"; // IMPORT IMAGES import Loop from "../svg/loupe.svg"; -import Next from "../svg/next.svg"; -import Prev from "../svg/prev.svg"; - -// const Regulations = (props) => { -// const {t} = props; -// useEffect(() => { -// window.scrollTo(0, 0); -// }, []); - class Regulations extends React.Component { - constructor(props) { super(props); this.tableRef = React.createRef; @@ -31,69 +20,60 @@ class Regulations extends React.Component { this.state = { items: [], DataisLoaded: false, - error: null - }; + error: null, + }; } componentDidMount() { - this._mounted = true + this._mounted = true; this.makeRemoteRequest(); } - - componentWillUnmount() { - this._mounted = false + this._mounted = false; } makeRemoteRequest = () => { + const url = `https://etalon.gov.tm:8080/api/v1/reestr_doc`; - const url = `https://etalon.gov.tm:8080/api/v1/reestr_doc` - if (this._mounted) { this.setState({ DataisLoaded: true }); } setTimeout(() => { - fetch(url, { - method: 'GET', - + method: "GET", }) - - .then(res => res.json()) - .then(res => { + .then((res) => res.json()) + .then((res) => { if (this._mounted) { this.setState({ items: res.data, error: res.message || null, DataisLoaded: true, - }) + }); // console.log(this.state.items) } - }) - .catch(error => { + .catch((error) => { if (this._mounted) { - this.setState({ error, DataisLoaded: false}); + this.setState({ error, DataisLoaded: false }); } }); }, 1500); }; - render() { const { t } = this.props; var number = 1; - var {DataisLoaded, items} = this.state; - if(!DataisLoaded){ - return
Loading ....
- }else{ - + var { DataisLoaded, items } = this.state; + if (!DataisLoaded) { + return
Loading ....
; + } else { return (
@@ -101,10 +81,14 @@ class Regulations extends React.Component {
- { - const input = e.target.value; - tableSearch(input, 'tbody-search'); - }} /> + { + const input = e.target.value; + tableSearch(input, "tbody-search"); + }} + />
*/} -
); } } -}; +} // export default Service; export default withTranslation()(Service); - diff --git a/src/pages/Service_bottom.js b/src/pages/Service_bottom.js index acd5812..598ef24 100644 --- a/src/pages/Service_bottom.js +++ b/src/pages/Service_bottom.js @@ -1,8 +1,7 @@ // IMPORT MODULES -import React from "react"; -import { withTranslation } from 'react-i18next'; -import i18n from '../i18n'; - +import React from "react"; +import { withTranslation } from "react-i18next"; +import i18n from "../i18n"; // IMPORT COMPONENTS // import Breadcrumb from "../components/Global/Breadcrumb"; @@ -17,58 +16,50 @@ import Img1 from "../img/serviceRequest_1.jpg"; // const Service = (props) => { // const {t} = props; class Service_bottom extends React.Component { - constructor(props) { super(props); this.state = { items: [], DataisLoaded: false, - error: null - }; + error: null, + }; } componentDidMount() { - this._mounted = true + this._mounted = true; this.makeRemoteRequest(); } - - componentWillUnmount() { - this._mounted = false + this._mounted = false; } makeRemoteRequest = () => { - const url = `https://etalon.gov.tm:8080/api/v1/wid_zayawok`; - + if (this._mounted) { this.setState({ DataisLoaded: true }); } setTimeout(() => { - fetch(url, { - method: 'GET', - + method: "GET", }) - - .then(res => res.json()) - .then(res => { + .then((res) => res.json()) + .then((res) => { if (this._mounted) { this.setState({ items: res.data, error: res.message || null, DataisLoaded: true, - }) + }); // console.log(res.data[0]['data'][0]) // console.log(this.state.items) } - }) - .catch(error => { + .catch((error) => { if (this._mounted) { - this.setState({ error, DataisLoaded: false}); + this.setState({ error, DataisLoaded: false }); } }); }, 1500); @@ -77,71 +68,67 @@ class Service_bottom extends React.Component { render() { const { t } = this.props; - - var {DataisLoaded, items} = this.state; - if(!DataisLoaded){ - return
Loading ....
- }else{ - + var { DataisLoaded, items } = this.state; + if (!DataisLoaded) { + return
Loading ....
; + } else { // console.log(this.state.items); return ( - - -
-
-

- {t('Виды заявок')} -

-
+
+
+

+ {t("Виды заявок")} +

+
+
+
+ {items.map((item) => ( +
{ + window.open(item.image.path); + }} + key={item.id} + > +
+
+ Print +
-
- - {items.map(item=>( -
{ - window.open(item.image.path); - }} - key={item.id} - > -
-
- Print -
-
- -
-

- { i18n.language === 'en' && - JSON.parse(item['translations'][0]['attribute_data']).title - } - { i18n.language === 'ru' && - item.title - } - { i18n.language === 'tm' && - JSON.parse(item['translations'][1]['attribute_data']).title - } -

-
-
- ))} - + +
+

+ {i18n.language === "en" && + JSON.parse(item["translations"][0]["attribute_data"]) + .title} + {i18n.language === "ru" && item.title} + {i18n.language === "tm" && + JSON.parse(item["translations"][1]["attribute_data"]) + .title} +

- - + ))} +
+
); } } -}; +} // export default Service; export default withTranslation()(Service_bottom); - diff --git a/src/styles/_main.scss b/src/styles/_main.scss index b17062f..582a900 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -15,6 +15,9 @@ align-items: center; justify-content: center; padding-bottom: 10rem; + a { + width: 100%; + } } .swiper { @@ -175,10 +178,11 @@ } .tab-name { + overflow-y: auto; font-size: 1.8rem; font-weight: bold; margin: 2rem 0; - max-height: 7.5rem; + // max-height: 7.5rem; overflow: hidden; text-overflow: ellipsis; } @@ -363,16 +367,12 @@ } @media screen and (max-width: 1360px) { - .slider { padding-bottom: 6rem; } .depts-wrapper { grid-template-columns: repeat(2, 1fr); } - // .sites-wrapper .site .sites-bottom h4 { - // font-size: 1.8rem; - // } .dept { max-width: unset; @@ -382,6 +382,7 @@ .sites-wrapper .site { max-width: unset; + max-height: unset; } .tab-wrapper { @@ -404,9 +405,12 @@ max-height: unset; width: 100%; height: 35rem; + display: flex; + align-items: center; + justify-content: center; img { - // width: 100%; + object-fit: cover; height: 100%; } } @@ -414,6 +418,11 @@ } } +@media screen and (max-width: 1000px) { + .second-slider .swipe-slide h2 { + font-size: 3rem; + } +} @media screen and (max-width: 930px) { .depts-wrapper { grid-template-columns: 1fr; @@ -520,6 +529,12 @@ } } +@media screen and (max-width: 670px) { + .second-slider .swipe-slide h2 { + font-size: 2.4rem; + } +} + @media screen and (max-width: 550px) { .nav-right { max-width: 35%; @@ -557,6 +572,12 @@ } } +@media screen and (max-width: 410px) { + .second-slider .swipe-slide h2 { + font-size: 1.6rem; + } +} + @media screen and (max-width: 380px) { #tab-header-text { font-size: 2rem;