Skip to content

Commit

Permalink
WIP refactor /app/X page design
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarkBrines
DarkBrines committed Nov 27, 2024
1 parent b0c3e66 commit 99eced9
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 349 deletions.
40 changes: 20 additions & 20 deletions resources/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,24 +79,24 @@ document.body.setAttribute("path", window.location.pathname)
* We watch the position of the vertical scroll of the page.
* If it exceeds a certain point, we activate/deactivate the scroll mode of the header.
*/
window.addEventListener("scroll", () => {
checkHeaderOnScroll();
});

function checkHeaderOnScroll(){
const BREAK_POINT = 60;
const CLASS = "top";
if(window.scrollY > BREAK_POINT){
if(HEADER.classList.contains(CLASS)){
HEADER.classList.remove(CLASS);
}
}
else{
if(!HEADER.classList.contains(CLASS)){
HEADER.classList.add(CLASS);
}
}
}
checkHeaderOnScroll();
// window.addEventListener("scroll", () => {
// checkHeaderOnScroll();
// });

// function checkHeaderOnScroll(){
// const BREAK_POINT = 60;
// const CLASS = "top";
// if(window.scrollY > BREAK_POINT){
// if(HEADER.classList.contains(CLASS)){
// HEADER.classList.remove(CLASS);
// }
// }
// else{
// if(!HEADER.classList.contains(CLASS)){
// HEADER.classList.add(CLASS);
// }
// }
// }
// checkHeaderOnScroll();

//#endregion
//#endregion
290 changes: 37 additions & 253 deletions resources/scss/module/apps.scss
View file
Original file line number Diff line number Diff line change
@@ -1,274 +1,58 @@
h1.search-title {
font-family: "Helvetica-Bold", Helvetica;
font-weight: 700;
color: #000000;
font-size: 40px;
letter-spacing: 0;
line-height: normal;
white-space: nowrap;

margin-bottom: 20px;
}

.apps-container {
div#app-head {
display: flex;
flex-wrap: wrap;
}

.app-block {
display: inline-flex;
width: 280px;
height: 85px;

margin-bottom: 20px;
margin-right: 20px;

padding: 5px;
border-radius: 10px;
gap: 20px;

overflow: hidden;

transition: color .2s;

>.app-img {
width: 75px;
height: 75px;
background-color: #d9d9d9;
border-radius: 20px;
flex-shrink: 0;
>img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 15px;
background-color: #fefefe;
}

>.app-details {
padding-left: 5%;

>.app-title {
font-family: "Helvetica-Bold", Helvetica;
font-weight: 700;
color: black;
font-size: 24px;
letter-spacing: 0;
line-height: 30px;
white-space: nowrap;
>div#app-details {
margin-top: 15px;

overflow: hidden;
text-overflow: clip;
>h1 {
font-size: 35px;
font-weight: 500;
}

>.app-desc {
font-family: "Helvetica-Bold", Helvetica;
font-weight: 700;
color: #818181;
font-size: 15px;
letter-spacing: 0;
line-height: normal;
>h2 {
margin-top: 5px;
font-size: 20px;
color: #777;
}
}
}


.app-block:hover>.app-details>.app-title {
color: #89D5C0;
}

////// PRODUCT VIEW/////
.p-app{
font-family: Helvetica;
margin:0;
font-weight: 400;
font-size: 15px;
}
/* ARROW BACKWARD */

.page-backward-link{
text-decoration: none;
font-size: 1.4rem;
color: #39BC9B;
display: flex;
align-items: center;
margin:30px;
}
.page-backward-link .arrow-backward {
margin-right: 1em;
height: 0.1em;
width: 1.5em;
position: relative;
background: #39BC9B;
transition: all 0.2s;
}
.page-backward-link .arrow-backward::before,
.page-backward-link .arrow-backward::after {
content: "";
position: absolute;
left: 0;
top: 0;
background: #39BC9B;
height: 0.1em;
width: 0.6em;
}
.page-backward-link .arrow-backward::before {
transform: rotate(45deg);
transform-origin: left bottom;
}
.page-backward-link .arrow-backward::after {
transform: rotate(-45deg);
transform-origin: left top;
}
.page-backward-link:hover .arrow-backward {
width: 5em;
}


/*Template*/
.template{
display:flex;
flex-direction: column;
}
.h2-app{
color: #828282;
font-size: 15px;
font-weight: 700;
}
/* Arrow */
.exit{
width:100%;
display:flex;
flex-direction: column;
}
/* Structure */
.element{
display:flex;
flex-direction: column;
justify-content: space-around;
margin-left: 6em;
}

/* Part 1 */

.t1{
display:flex;
flex-direction: row;
height: 119px;
flex:2;
}
.t1-1{
display:flex;
flex-direction: row;
justify-content: space-between;
}
#square {
width: 119px;
height: 119px;
background: #D9D9D9;
border-radius: 20px;
}
.t1-1bis{
display:flex;
flex-direction: column;
justify-content: space-between;
margin-left:10px;
}
.t1-2{
display:flex;
flex-direction: row;
justify-content: space-between;
margin-left:5%;
margin-right:5%;
margin-top:3%;
flex:1
}
.t1-2bis{
display:flex;
flex-direction: column;
justify-content: center;
}
.t1-2bis p{
text-align: center;
color: #828282;
table#app-details-table {
border-collapse: collapse;
font-size: 15px;
}
font-family: sans-serif;

/* Part 2 */
.t2{
margin-top:6em;
display:flex;
flex-direction: row;
}
#div-username{
display:flex;
justify-content: center;
margin: 2%;
}
text-align: left;
color: #777;

/* Part 3 */
.t3{
margin-top:6em;
display:flex;
flex-direction: column;
margin-bottom:3em;
}
.t3 p{
margin-left:1em;
}
margin: 15px 0;

th,
td {
padding-right: 35px;
border: 8px transparent solid;
}

/* Part 4 */
.t4{
display:flex;
flex-direction: column;
}
.version-container{
display:flex;
flex-direction: column;
border-bottom: 1px solid black;
margin-left: 1em;
margin-right: 3em;
}
.version-link{
display:flex;
flex-direction: row;
justify-content: space-between;
padding:3px;
}
.Upload-link{
text-decoration: none;
color:#39BC9B;
}
.inputD{
display:none;
}
.version-description{
display: none;
>thead {
font-weight: normal;
}
}

#v1:checked ~ #desc1{
display:flex;
flex-direction: column;
margin:1em;
}
#v2:checked ~ #desc2{
display:flex;
flex-direction: column;
margin:1em;
}
#v3:checked ~ #desc3{
display:flex;
flex-direction: column;
margin:1em;
}
#v4:checked ~ #desc4{
display:flex;
flex-direction: column;
margin:1em;
}
#v5:checked ~ #desc5{
display:flex;
flex-direction: column;
margin:1em;
}
#v6:checked ~ #desc6{
display:flex;
flex-direction: column;
margin-top:5px;
margin-bottom: 5px;
}
h1.app-prop-title {
font-size: 25px;
font-weight: 500;

margin-top: 20px;
margin-bottom: 10px;
}
Loading

0 comments on commit 99eced9

Please sign in to comment.