Skip to content

Commit

Permalink
💄About /index
Browse files Browse the repository at this point in the history
  • Loading branch information
@noeypatt
noeypatt committed Mar 29, 2020
1 parent 872d1d4 commit 554f66e
Show file tree
Hide file tree
Showing 3 changed files with 60 additions and 27 deletions.
2 changes: 0 additions & 2 deletions components/cover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,7 @@ const Cover = () => {
<h6 className="animated fadeInDown delay-1s">ElderlyDB เป็นการนำข้อมูลเกี่ยวกับผู้สูงอายุ</h6>
<h6 className="animated fadeInDown delay-1s">มาแสดงผลในรูปเเบบของกราฟในรูปแบบต่าง ๆ </h6>
<h6 className="animated fadeInDown delay-1s">ภายในอำเภอกะทู้ จังหวัดภูเก็ต </h6>

</div>

</div>

<Link href="/main">
Expand Down
57 changes: 37 additions & 20 deletions pages/index/About.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,37 @@ import { useMediaQuery } from 'react-responsive';
const About = () => {
const isSmallScreen = useMediaQuery({ maxDeviceWidth: 575.98 })
const [data, setData] = useState([

{
title: "ศูนย์การเรียนรู้สำหรับผู้สูงอายุ",
text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไปมากกว่าร้อยละ 10 ของประชากรทั้งประเทศ",
subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปีมากกว่าร้อยละ 7 ของประชากรทั้งประเทศ"
title: "แบบสำรวจข้อมูลพื้นฐานผู้สูงอายุ",
text: "",
subtext: ""
},
{
title: "สถานพยาบาล",
text: "สังคมที่มีประชากรอายุ 60 ปีขึ้นไป มากกว่าร้อยละ 20 ของประชากรทั้งประเทศ",
subtext: "หรือมีประชากรอายุตั้งแต่ 65 ปี มากกว่าร้อยละ 14 ของประชากรทั้งประเทศ"
title: "1. ข้อมูลทั่วไป",
text: "ประวัติส่วนตัว เช่น ชื่อ-นามสกุล ช่วงอายุ สัญชาติ ศาสนา และที่อยู่",
subtext: ""
},
{
title: "กิจกรรมสำหรับผู้สูงอายุในด้านต่างๆ",
text: "สังคมที่มีประชากรอายุ 65 ปีขึ้นไปมากกว่า ร้อยละ 20 ของประชากรทั้งประเทศ",
title: "2. ข้อมูลด้านสุขภาพ",
text: "ประวัติด้านการรักษา สภาพความพิการ โรคประจำตัว การตรวจสุภาพ ",
subtext: "สถานพยาบาลที่ใช้ประจำ การออกกำลังกาย รวมไปถึงการสูบบุหรี่ หรือดื่มสุรา"
},
{
title: "3. ข้อมูลด้านครอบครัวเเละที่อยู่อาศัย",
text: "ข้อมูลเกี่ยวกับที่อยู่อาศัย สภาพบ้านที่อยู่อาศัย เเละจำนวนผู้อาศัยในภายครอบครัว",
subtext: ""
},
{
title: "4. ข้อมูลเกี่ยวกับภาครัฐ",
text: "ข้อมูลเกี่ยวกับการเข้าร่วมกิจกรรมทางสังคม/เทศบาล และการเข้าร่วมกิจกรรมทางศาสนกิจ",
subtext: "รวมไปถึงช่องทางการรับรู้ข้อมูลข่าวสารของทางเทศบาล"
},
])

const [header,setHeader] = useState("สังคมผู้สูงอายุ")
const [subHead,setSubHead] = useState("ภายในอำเภอกะทู้ จังหวัดภูเก็ต")
const [image,setImage] = useState("/static/")
const [header, setHeader] = useState("Elderly DB")
const [subHead, setSubHead] = useState("เว็บฐานข้อมูลผู้สูงอายุ ภายในอำเภอกะทู้ จังหวัดภูเก็ต")
const [image, setImage] = useState("/static/")

const [status, setStatus] = useState(false)

Expand Down Expand Up @@ -54,7 +65,7 @@ const About = () => {
<link rel='icon' href='/static/logomain.svg' />
</Head>
<NavBar name="main" tab={isSmallScreen ? homeMin : home} confirm={onConfirm} />
<div className="warp-main-page">
<div className="warp-about-page">
<div className="page-content">
{
isSmallScreen ?
Expand Down Expand Up @@ -82,22 +93,28 @@ const About = () => {
:
<div className="container-fluid">
<div className="head-content">
<h3>{header}</h3>
<h3>{subHead}</h3>
<h1 className="name-header animated fadeInDown delay-s">{header}</h1>
<h4 className="animated fadeInDown delay-s">{subHead}</h4>
<div className="title-about">
<h6 className="animated fadeIn delay-1s">เว็บไซต์ฐานข้อมูประชากรผู้สูงอายุ แสดงค่าทางสถิติในรูปเเบบของกราฟประเภทต่าง ๆ</h6>
</div>
</div>

<div className="detail-content">
<img src="/static/testcoverAbout.jpg" />
<img className="animated fadeIn delay-1s" src="/static/testcoverAbout.jpg" />
<div className="data-detail-content">
{/* {
<div className="title-content">
<h6> </h6>
</div>
{
data.map((item, index) => (
<div className="title-content" key={index}>
<div className="title-content animated fadeIn delay-1s" key={index}>
<h6 className="header-title-content">{item.title}</h6>
<h6>{item.text}</h6>
<h6>{item.subtext}</h6>
<h6 className="sub-title-content">{item.text}</h6>
<h6 className="sub-title-content">{item.subtext}</h6>
</div>
))
} */}
}
</div>
</div>
</div>
Expand Down
28 changes: 23 additions & 5 deletions styles/about.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
$font-header: "Frank Ruhl Libre" !important;
$font-text-sub: #978bab !important;

.warp-about {
.page-content {
padding-top: 3rem;
Expand Down Expand Up @@ -108,23 +111,33 @@
}
}


.warp-main-page{
.warp-about-page {
.page-content {
padding-top: 3rem;

.container-fluid {
display: flex;
flex-direction: column;
.head-content {
h3 {
font-size: 2rem !important;
margin-bottom: 1rem !important;
h1.name-header {
font-family: $font-header;
}

.title-about {
display: flex;
flex-direction: column;
align-items: center;
h6 {
margin-top: 0.5rem;
color: $font-text-sub;
font-style: italic;
}
}
}
.detail-content {
display: flex;
justify-content: center;
align-items: center;
margin: 2rem 3rem;

@media (max-width: 575.98px) {
Expand All @@ -140,6 +153,7 @@
}

.data-detail-content {
margin-left: 2rem;
display: flex;
flex-direction: column;

Expand All @@ -158,6 +172,10 @@
font-weight: bold !important;
}

.sub-title-content {
margin-left: 1rem;
}

h6 {
text-align: start;
opacity: 0.8;
Expand Down

1 comment on commit 554f66e

@vercel
Copy link

@vercel vercel bot commented on 554f66e Mar 29, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.