@@ -55,7 +55,7 @@ function Nav() {
{!loginStatus && }
- {loginStatus && }
+ {loginStatus && }
{loginStatus && }
{loginStatus && }
diff --git a/src/Nav.scss b/src/Nav.scss
index 5656c16..6752716 100644
--- a/src/Nav.scss
+++ b/src/Nav.scss
@@ -4,16 +4,16 @@ $breakpoint-lg: 992px;
.line {
display: block;
- width: 25px;
- height: 3px;
- margin: 5px 0;
+ width: 37.9398941022rem;
+ height: 4.55278729226rem;
+ margin: 7.58797882043rem;
background-color: #333;
transition: transform 0.2s, opacity 0.2s;
}
.menu{
top: 0;
- width: 15vw;
+ width: 285.51894946rem;
height: 100vh;
position: fixed;
right: 0vw;
@@ -63,11 +63,11 @@ div.menu-overlay.menu-hidden{
}
.menu-hidden{
- right: -15vw;
+ right: -285.51894946rem;
}
.open .line:nth-child(1) {
- transform: translateY(8px) rotate(45deg);
+ transform: translateY(12.1407661127rem) rotate(45deg);
}
.open .line:nth-child(2) {
@@ -75,7 +75,7 @@ div.menu-overlay.menu-hidden{
}
.open .line:nth-child(3) {
- transform: translateY(-8px) rotate(-45deg);
+ transform: translateY(-12.1407661127rem) rotate(-45deg);
}
.nav-link{
diff --git a/src/containers/AccountPortal/style.scss b/src/containers/AccountPortal/style.scss
index 6eb056a..512f23e 100644
--- a/src/containers/AccountPortal/style.scss
+++ b/src/containers/AccountPortal/style.scss
@@ -11,14 +11,14 @@
// border: #24558b 1px solid;
border-radius: 5px;
padding: 21rem;
- width: 600rem;
- height: fit-content;
+ width: max(600rem, calc(100% * var(--is-protrait)));
+ height: max(auto);
box-shadow: 0px 0px 10px 0px #dcdcdc;
overflow: hidden;
position: absolute;
h1 {
- font-size: 30px;
+ font-size: 45.5278729226rem;
// text-align: center;
float: left;
font-weight: 200;
@@ -28,7 +28,7 @@
}
h2{
- font-size: 17px;
+ font-size: 25.7991279895rem;
color: #24558b;
}
@@ -40,7 +40,7 @@
outline: none;
border: rgb(169, 169, 169) 2px solid;
border-radius: 5px;
- font-size: 15px;
+ font-size: 22.7639364613rem;
background-color: #ffffff;
}
@@ -61,12 +61,12 @@
}
button {
- font-size: 15px;
+ font-size: 22.7639364613rem;
border-radius:5px;
background: #24558b;
color: #fff;
cursor: pointer;
- padding: 5px 10px;
+ padding: 7.58797882043rem 15.1759576409rem;
height: 70rem;
width: 100%;
margin-bottom: 30rem;
diff --git a/src/containers/IndexPage/IdeaShow.scss b/src/containers/IndexPage/IdeaShow.scss
index 4654545..1fa6c07 100644
--- a/src/containers/IndexPage/IdeaShow.scss
+++ b/src/containers/IndexPage/IdeaShow.scss
@@ -44,10 +44,10 @@ div.container-ideashow{
@media (orientation: portrait) {
div.container-ideashow {
div.text-container {
- width: 80vw;
+ width: 60rem*10;
}
div.text-container p.slogan {
- font-size: 20rem;
+ font-size: 60rem;
}
img.char {
diff --git a/src/containers/Logout.jsx b/src/containers/Logout.jsx
new file mode 100644
index 0000000..dab2def
--- /dev/null
+++ b/src/containers/Logout.jsx
@@ -0,0 +1,31 @@
+
+
+import { useSelector } from 'react-redux';
+import UserAPI from '../utils/UserAPI';
+import { useNavigate } from 'react-router';
+import { useEffect } from 'react';
+
+const Logout = () => {
+ const navigate = useNavigate();
+ const {loginStatus} = useSelector((state) => state.userState);
+ useEffect(()=>{
+ async function logout() {
+ if (!loginStatus) {
+ navigate('/');
+ }
+ else {
+ await UserAPI.logout();
+ navigate('/');
+ window.location.reload();
+ }
+ }
+ logout();
+ }, [loginStatus]);
+
+ return (
+ <>
+
+ );
+};
+
+export default Logout;
diff --git a/src/index.css b/src/index.css
index 34bd51f..bbef703 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,11 @@
html{
width: 100%;
height: 100%;
- font-size: calc(100vw / 1920); /* 1px = 1rem in 1920px wide */
+ /* font-size: calc( calc(100vw + 100vh) / calc(1920 + 1080) ); */
+ font-size: calc(100vw / 1920);
+ --is-protrait: 0;
+ /* font-size: calc(100vw / 1920); */
+ /* */
}
body{
@@ -17,6 +21,7 @@ body{
@media (orientation: portrait) {
html {
- font-size: calc(100vw / 375); /* 1px = 1rem in 375px wide */
+ font-size: calc(100vw / 800); /* 1px = 1rem in 375px wide */
+ --is-protrait: 1;
}
}
diff --git a/src/utils/UserAPI.jsx b/src/utils/UserAPI.jsx
index 8ac50d3..a2aefb8 100644
--- a/src/utils/UserAPI.jsx
+++ b/src/utils/UserAPI.jsx
@@ -2,6 +2,7 @@ import axios from 'axios';
import sha256 from 'crypto-js/sha256';
var userApiPath = "http://localhost:3000/api/users";
+axios.defaults.withCredentials = true;
String.prototype.reverse = function (){
return this.split("").reverse().join("");
@@ -65,8 +66,7 @@ class UserAPI{
static async refreshLoad(){
try {
var response = await axios.get(
- `${userApiPath}/get_login_state`,
- {withCredentials: true}
+ `${userApiPath}/get_login_state`
);
UserAPI.currentUserId = response.data.user_id;
UserAPI.currentUserName = response.data.realname;
@@ -102,12 +102,17 @@ class UserAPI{
{
user_id: userId,
password: password
- },
- {withCredentials: true}
+ }
);
}
+ static async logout(){
+ await axios.put(
+ `${userApiPath}/${UserAPI.currentUserId}/logout`
+ );
+ }
+
/**
* @param {string} userId
* @param {string} password
@@ -116,8 +121,7 @@ class UserAPI{
static async register(userId, password){
var password = password.passwordProcess();
var response = await axios.post(`${userApiPath}/${userId}/normal`,
- {password: password},
- {withCredentials: true}
+ {password: password}
);
return response.data.user_id;
}
@@ -131,8 +135,7 @@ class UserAPI{
{
verificationCode: verificationCode,
email: email
- },
- {withCredentials: true}
+ }
);
}
@@ -160,8 +163,7 @@ class UserAPI{
*/
static async getUserInfo(userId){
var response = await axios.get(
- `${userApiPath}/${userId}`,
- {withCredentials: true}
+ `${userApiPath}/${userId}`
);
/**
* @type {{[key: string]: ValueInfo}}
@@ -252,8 +254,7 @@ class UserAPI{
static async updateUserInfo(userId, config) {
var res = await axios.put(
`${userApiPath}/${userId}`,
- config,
- {withCredentials: true}
+ config
);
return res.data;
}