mirror of
https://github.com/gnmyt/myspeed.git
synced 2026-02-09 23:18:37 -06:00
Redesign Tutorials page and components in web
This commit is contained in:
Mathias Wagner
@@ -1,13 +1,6 @@
|
||||
import "./styles.sass";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faBookOpenReader,
|
||||
faChalkboardTeacher,
|
||||
faNewspaper,
|
||||
faPaperPlane,
|
||||
faPlay,
|
||||
faVideo
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {faPlay, faBookOpen, faPlus} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import Videos from "./sources/videos.jsx";
|
||||
import BlogPosts from "./sources/blog_posts.jsx";
|
||||
@@ -17,49 +10,67 @@ export const Tutorials = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="tutorial-page">
|
||||
<div className="page-title">
|
||||
<FontAwesomeIcon icon={faChalkboardTeacher}/>
|
||||
<div className="tutorials-page">
|
||||
<div className="tutorials-header">
|
||||
<h1>Tutorials</h1>
|
||||
<p>Learn how to use MySpeed with these community-created guides</p>
|
||||
</div>
|
||||
|
||||
<div className="tutorial-section">
|
||||
<FontAwesomeIcon icon={faVideo}/>
|
||||
<h2>Videos</h2>
|
||||
</div>
|
||||
<section className="tutorials-section">
|
||||
<h2>Video Tutorials</h2>
|
||||
|
||||
<div className="tutorial-grid">
|
||||
{Videos.map((video, index) => (
|
||||
<div key={index} className="tutorial-card"
|
||||
onClick={() => window.open(video.link, "_blank")}>
|
||||
<img src={video.thumb} alt={video.title} className="thumbnail"/>
|
||||
<img src={video.creator} alt={video.title} className="creator"/>
|
||||
<FontAwesomeIcon icon={faPlay} className="open_btn"/>
|
||||
</div>
|
||||
))}
|
||||
<div className="content-card" onClick={() => navigate("/tutorials/submit?type=video")}>
|
||||
<FontAwesomeIcon icon={faPaperPlane} className="open_btn"/>
|
||||
<div className="tutorials-grid">
|
||||
{Videos.map((video, index) => (
|
||||
<article
|
||||
key={index}
|
||||
className="tutorial-card"
|
||||
onClick={() => window.open(video.link, "_blank")}
|
||||
>
|
||||
<img src={video.thumb} alt={video.title} className="card-thumbnail"/>
|
||||
<img src={video.creator} alt="Creator" className="creator-avatar"/>
|
||||
<div className="card-overlay">
|
||||
<FontAwesomeIcon icon={faPlay}/>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
|
||||
<article
|
||||
className="tutorial-card add-card"
|
||||
onClick={() => navigate("/tutorials/submit?type=video")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus}/>
|
||||
<span>Submit video</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="tutorial-section">
|
||||
<FontAwesomeIcon icon={faNewspaper}/>
|
||||
<h2>Blog-Posts</h2>
|
||||
</div>
|
||||
<section className="tutorials-section">
|
||||
<h2>Blog Posts</h2>
|
||||
|
||||
<div className="tutorial-grid">
|
||||
{BlogPosts.map((video, index) => (
|
||||
<div key={index} className="tutorial-card"
|
||||
onClick={() => window.open(video.link, "_blank")}>
|
||||
<img src={video.thumb} alt={video.title} className="thumbnail"/>
|
||||
<img src={video.creator} alt={video.title} className="creator"/>
|
||||
<FontAwesomeIcon icon={faBookOpenReader} className="open_btn"/>
|
||||
</div>
|
||||
))}
|
||||
<div className="content-card" onClick={() => navigate("/tutorials/submit?type=blog")}>
|
||||
<FontAwesomeIcon icon={faPaperPlane} className="open_btn"/>
|
||||
<div className="tutorials-grid">
|
||||
{BlogPosts.map((post, index) => (
|
||||
<article
|
||||
key={index}
|
||||
className="tutorial-card"
|
||||
onClick={() => window.open(post.link, "_blank")}
|
||||
>
|
||||
<img src={post.thumb} alt={post.title} className="card-thumbnail"/>
|
||||
<img src={post.creator} alt="Creator" className="creator-avatar"/>
|
||||
<div className="card-overlay">
|
||||
<FontAwesomeIcon icon={faBookOpen}/>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
|
||||
<article
|
||||
className="tutorial-card add-card"
|
||||
onClick={() => navigate("/tutorials/submit?type=blog")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus}/>
|
||||
<span>Submit post</span>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +1,115 @@
|
||||
@use "@/common/styles/colors" as *
|
||||
|
||||
.tutorial-page
|
||||
padding: 5rem
|
||||
.tutorials-page
|
||||
min-height: 100vh
|
||||
padding: 120px 48px 80px
|
||||
max-width: 1200px
|
||||
margin: 0 auto
|
||||
|
||||
.tutorials-header
|
||||
text-align: center
|
||||
margin-bottom: 48px
|
||||
|
||||
h1
|
||||
font-size: 2.5rem
|
||||
font-weight: 700
|
||||
margin-bottom: 8px
|
||||
|
||||
p
|
||||
font-size: 1.125rem
|
||||
color: $text-secondary
|
||||
|
||||
.tutorials-section
|
||||
margin-bottom: 48px
|
||||
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
h2
|
||||
font-size: 1.125rem
|
||||
font-weight: 600
|
||||
color: $text-secondary
|
||||
margin-bottom: 16px
|
||||
|
||||
.tutorials-grid
|
||||
display: grid
|
||||
grid-template-columns: repeat(4, 1fr)
|
||||
gap: 12px
|
||||
|
||||
.tutorial-card
|
||||
position: relative
|
||||
aspect-ratio: 16 / 9
|
||||
border-radius: 10px
|
||||
overflow: hidden
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
.card-overlay
|
||||
opacity: 1
|
||||
|
||||
.card-thumbnail
|
||||
transform: scale(1.05)
|
||||
|
||||
.card-thumbnail
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
transition: transform 0.3s ease
|
||||
|
||||
.creator-avatar
|
||||
position: absolute
|
||||
bottom: 8px
|
||||
left: 8px
|
||||
width: 28px
|
||||
height: 28px
|
||||
border-radius: 50%
|
||||
object-fit: cover
|
||||
border: 2px solid rgba(255, 255, 255, 0.8)
|
||||
z-index: 2
|
||||
|
||||
.card-overlay
|
||||
position: absolute
|
||||
inset: 0
|
||||
background: rgba(0, 0, 0, 0.4)
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
opacity: 0
|
||||
transition: opacity 0.2s ease
|
||||
|
||||
svg
|
||||
font-size: 2rem
|
||||
color: white
|
||||
|
||||
.add-card
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 2rem
|
||||
align-items: center
|
||||
justify-content: center
|
||||
gap: 8px
|
||||
background: $background-lighter
|
||||
border: 1px dashed $border-color
|
||||
color: $text-muted
|
||||
transition: all 0.2s ease
|
||||
|
||||
&:hover
|
||||
border-color: $primary
|
||||
color: $primary
|
||||
background: rgba($primary, 0.05)
|
||||
|
||||
.page-title
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
gap: 1rem
|
||||
svg
|
||||
font-size: 1.5rem
|
||||
|
||||
span
|
||||
font-size: 0.875rem
|
||||
font-weight: 500
|
||||
|
||||
svg
|
||||
font-size: 24pt
|
||||
@media (max-width: 768px)
|
||||
.tutorials-page
|
||||
padding: 100px 24px 60px
|
||||
|
||||
.tutorials-header h1
|
||||
font-size: 2rem
|
||||
|
||||
h1
|
||||
font-size: 28pt
|
||||
|
||||
|
||||
.tutorial-section
|
||||
margin-left: -8rem
|
||||
padding: 1rem 3rem
|
||||
border: 4px solid $red
|
||||
border-radius: 1.5rem
|
||||
display: flex
|
||||
align-items: center
|
||||
width: fit-content
|
||||
animation: moveIn 0.3s ease-out
|
||||
|
||||
svg
|
||||
font-size: 18pt
|
||||
margin-right: 1rem
|
||||
|
||||
h2
|
||||
font-size: 20pt
|
||||
margin: 0
|
||||
|
||||
.tutorial-grid
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: center
|
||||
gap: 2rem
|
||||
|
||||
.content-card
|
||||
border: 4px solid $red
|
||||
width: 28rem
|
||||
height: 16rem
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
border-radius: 2rem
|
||||
cursor: pointer
|
||||
transition: all 0.3s
|
||||
animation: bounceIn 0.3s ease-out
|
||||
|
||||
svg
|
||||
font-size: 34pt
|
||||
color: $red
|
||||
|
||||
.content-card:hover
|
||||
border: 4px solid $red
|
||||
background-color: $red
|
||||
|
||||
svg
|
||||
color: $background
|
||||
|
||||
|
||||
.tutorial-card
|
||||
transition: all 0.3s
|
||||
border: 4px solid transparent
|
||||
border-radius: 2rem
|
||||
|
||||
cursor: pointer
|
||||
width: 28rem
|
||||
height: 16rem
|
||||
|
||||
animation: bounceIn 0.3s ease-out
|
||||
|
||||
.thumbnail
|
||||
border-radius: 1.5rem
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
|
||||
.creator
|
||||
position: relative
|
||||
width: 4rem
|
||||
height: 4rem
|
||||
bottom: 28%
|
||||
left: 1%
|
||||
border-radius: 50%
|
||||
|
||||
.open_btn
|
||||
position: relative
|
||||
display: none
|
||||
bottom: 75%
|
||||
left: 50%
|
||||
transform: translate(-50%, -50%)
|
||||
color: $red
|
||||
font-size: 28pt
|
||||
|
||||
.tutorial-card:hover
|
||||
border: 4px solid $red
|
||||
|
||||
.open_btn
|
||||
display: block
|
||||
|
||||
.thumbnail
|
||||
filter: brightness(0.5)
|
||||
|
||||
@keyframes moveIn
|
||||
0%
|
||||
transform: translateX(-30rem)
|
||||
100%
|
||||
transform: translateY(0)
|
||||
|
||||
@media screen and (max-width: 750px)
|
||||
.tutorial-page
|
||||
padding: 2rem
|
||||
.tutorial-page .tutorial-section
|
||||
margin-left: -4rem
|
||||
.tutorial-page .tutorial-card
|
||||
height: 14rem
|
||||
.creator
|
||||
width: 3rem
|
||||
height: 3rem
|
||||
bottom: 25%
|
||||
left: 1%
|
||||
.tutorials-grid
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
|
||||
Reference in New Issue
Block a user