parent
							
								
									4eb651a159
								
							
						
					
					
						commit
						caba2fa0ad
					
				
				 24 changed files with 369 additions and 74 deletions
			
			
		@ -0,0 +1,3 @@ | 
				
			|||||||
 | 
					{ | 
				
			||||||
 | 
					  "editor.tabSize": 2 | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,11 @@ | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					class location { | 
				
			||||||
 | 
					  getId = () => { | 
				
			||||||
 | 
					    const pathname = window.location.pathname; | 
				
			||||||
 | 
					    return pathname.slice(pathname.lastIndexOf('/') + 1, pathname.length); | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const _location = new location(); | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default _location; | 
				
			||||||
@ -0,0 +1,117 @@ | 
				
			|||||||
 | 
					.courses-course { | 
				
			||||||
 | 
					  margin-top: 40px; | 
				
			||||||
 | 
					  padding: 10px; | 
				
			||||||
 | 
					  border-bottom: 1px solid #212121; | 
				
			||||||
 | 
					  transition: all 0.5s; | 
				
			||||||
 | 
					  * { | 
				
			||||||
 | 
					    transition: all 0.5s; | 
				
			||||||
 | 
					    color: #aaa; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  img { | 
				
			||||||
 | 
					    border-radius: 10px; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  h1 { | 
				
			||||||
 | 
					    transition: all 0.5s; | 
				
			||||||
 | 
					    margin-bottom: 10px; | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					  p { | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 1441px) { | 
				
			||||||
 | 
					  .courses-course { | 
				
			||||||
 | 
					    &:hover { | 
				
			||||||
 | 
					      background-color: #dddddd21; | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); | 
				
			||||||
 | 
					      img { | 
				
			||||||
 | 
					        transform: translateX(10px) scale(1.14); | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      h1 { | 
				
			||||||
 | 
					        color: #84de56; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      p { | 
				
			||||||
 | 
					        color: #cececefa; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    img { | 
				
			||||||
 | 
					      height: 150px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      font-size: 20px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    p { | 
				
			||||||
 | 
					      font-size: 13px; | 
				
			||||||
 | 
					      width: 80%; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 1008px) and (max-width: 1400px) { | 
				
			||||||
 | 
					  .courses-course { | 
				
			||||||
 | 
					    &:hover { | 
				
			||||||
 | 
					      background-color: #dddddd21; | 
				
			||||||
 | 
					      border-radius: 10px; | 
				
			||||||
 | 
					      box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); | 
				
			||||||
 | 
					      img { | 
				
			||||||
 | 
					        transform: translateX(10px) scale(1.14); | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      h1 { | 
				
			||||||
 | 
					        color: #84de56; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					      p { | 
				
			||||||
 | 
					        color: #cececefa; | 
				
			||||||
 | 
					      } | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    img { | 
				
			||||||
 | 
					      height: 150px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      font-size: calc(100vw / 70); | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    p { | 
				
			||||||
 | 
					      font-size: calc(100vw / 100); | 
				
			||||||
 | 
					      width: 80%; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width : 641px) and (max-width: 1007px) { | 
				
			||||||
 | 
					  .courses-course { | 
				
			||||||
 | 
					    margin-top: 20px; | 
				
			||||||
 | 
					    background-color: #aaaaaa21; | 
				
			||||||
 | 
					    border-radius: 10px; | 
				
			||||||
 | 
					    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); | 
				
			||||||
 | 
					    img { | 
				
			||||||
 | 
					      max-height: 120px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      font-size: calc(100vw / 45); | 
				
			||||||
 | 
					      color: #84de56; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    p { | 
				
			||||||
 | 
					      font-size: calc(100vw / 65); | 
				
			||||||
 | 
					      width: 80%; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (max-width: 640px) { | 
				
			||||||
 | 
					  .courses-course { | 
				
			||||||
 | 
					    margin-top: 20px; | 
				
			||||||
 | 
					    background-color: #aaaaaa21; | 
				
			||||||
 | 
					    border-radius: 10px; | 
				
			||||||
 | 
					    box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); | 
				
			||||||
 | 
					    img { | 
				
			||||||
 | 
					      max-height: 120px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    h1 { | 
				
			||||||
 | 
					      font-size: calc(100vw / 24); | 
				
			||||||
 | 
					      color: #84de56; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					    p { | 
				
			||||||
 | 
					      font-size: calc(100vw / 40); | 
				
			||||||
 | 
					      width: 80%; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,19 @@ | 
				
			|||||||
 | 
					import React, { useState } from "react"; | 
				
			||||||
 | 
					import "./index.scss"; | 
				
			||||||
 | 
					import { Link } from "react-router-dom"; | 
				
			||||||
 | 
					import location from "../../../util/location"; | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default function Course({ data }: any) { | 
				
			||||||
 | 
					  return ( | 
				
			||||||
 | 
					    <Link to={"/courses/" + location.getId()} className="courses-course d-flex"> | 
				
			||||||
 | 
					      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" /> | 
				
			||||||
 | 
					      <div className="d-flex flex-column justify-content-center px-3"> | 
				
			||||||
 | 
					        <h1>{data.name}</h1> | 
				
			||||||
 | 
					        <p> | 
				
			||||||
 | 
					          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده | 
				
			||||||
 | 
					          از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و | 
				
			||||||
 | 
					        </p> | 
				
			||||||
 | 
					      </div> | 
				
			||||||
 | 
					    </Link> | 
				
			||||||
 | 
					  ); | 
				
			||||||
 | 
					} | 
				
			||||||
@ -0,0 +1,43 @@ | 
				
			|||||||
 | 
					.courses { | 
				
			||||||
 | 
					  main { | 
				
			||||||
 | 
					    margin-top: 30px; | 
				
			||||||
 | 
					    header { | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 1441px) { | 
				
			||||||
 | 
					  .courses { | 
				
			||||||
 | 
					    main { | 
				
			||||||
 | 
					      max-width: 700px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 1008px) and (max-width: 1400px) { | 
				
			||||||
 | 
					  .courses { | 
				
			||||||
 | 
					    main { | 
				
			||||||
 | 
					      max-width: 700px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (min-width: 641px) and (max-width: 1007px) { | 
				
			||||||
 | 
					  .courses { | 
				
			||||||
 | 
					    main { | 
				
			||||||
 | 
					      max-width: 500px; | 
				
			||||||
 | 
					      margin-top: 10px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@media screen and (max-width: 640px) { | 
				
			||||||
 | 
					  .courses { | 
				
			||||||
 | 
					    main { | 
				
			||||||
 | 
					      max-width: 500px; | 
				
			||||||
 | 
					      margin-top: 10px; | 
				
			||||||
 | 
					      padding: 0px 10px; | 
				
			||||||
 | 
					    } | 
				
			||||||
 | 
					  } | 
				
			||||||
 | 
					} | 
				
			||||||
 | 
					
 | 
				
			||||||
					Loading…
					
					
				
		Reference in new issue