Skip to content

Commit

Permalink
Merge pull request #9 from CodeURJC-DAW-2022-23/feat/top-list.html-la…
Browse files Browse the repository at this point in the history
…yout

feat: top list page
  • Loading branch information
franchescoURJC authored Feb 17, 2023
2 parents cde5b9d + cc264b2 commit 1259a09
Show file tree
Hide file tree
Showing 8 changed files with 284 additions and 3 deletions.
1 change: 1 addition & 0 deletions front/src/public/images/commentIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions front/src/public/images/downvoteIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions front/src/public/images/shareIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions front/src/public/images/upvoteIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions front/src/public/profile.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<body>
<div class="container-fluid p-0">
<div class="row m-0">
<div class=" col-3 text-black p-4">
<div class=" col-4 text-white p-6">
<div class="pb-3">
<img src="images/profile_picture.jpg" alt="profilePic" class="rounded-circle .img-fluid">
</div>
Expand Down Expand Up @@ -52,7 +52,7 @@
@gledrian.dev_
</div>
</div>
<div class="col-9 p-4">
<div class="col-8 p-6">
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions front/src/public/styles/profile.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

.container-fluid {
height: 100vh;
background-color: black;
}

.prof-name {
Expand Down
165 changes: 165 additions & 0 deletions front/src/public/styles/top-list.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
body {
align-items: center;
background-color: black;
}

p {
color: black;
margin: auto;
padding-left: 1em;
padding-right: 1em;
}

.row {
width: 100vw;
}

.fa-regular {
color: white;
}

nav {
border-bottom: 1px solid gray;
}

i {
cursor: pointer;
}

.commentBox {
background-color: white;
border-bottom-left-radius: var(--bs-border-radius);
border-bottom-right-radius: var(--bs-border-radius);
}

.post,
.commentSection,
.comment {
width: 100%;
}

.postInfo,
.writeComment {
border-top-left-radius: var(--bs-border-radius);
border-top-right-radius: var(--bs-border-radius);
}

.writeComment,
.comment {
background-color: white;
border-bottom-style: solid;
border-width: 1px;
border-color: rgb(224, 224, 224);
}

.form-control {
margin: auto;
width: 90%;
}

.own-comment-image {
margin: auto;
margin-right: 0.25em;
}

.comment-image {
margin-top: 0.1em;
}

.commentBox {
margin: auto;
}

.btn-primary {
background-color: #2d474f;
border: 0;
}

.btn-primary:hover,
.btn-primary:active:focus {
background-color: #63b1b1;
}

.OP {
color: black;
font-weight: 600;
font-size: 25px;
}

.username {
color: black;
font-weight: 600;
font-size: 20px;
}

h6 {
color: grey;
}

input[type='text'] {
min-height: 7em;
word-wrap: break-word;
word-break: break-all;
}

li {
border-radius: 10px;
border: solid 3px;
border-color: #69c0a1;
}

li + li {
margin-top: 1rem;
}

ol li {
padding: 1em;
font-size: 20px;
font-weight: 600;
text-align: left;
}

ol {
width: 75%;
list-style-position: inside;
}

.text-left {
margin: 0;
}

.profileImg {
margin-left: 1em;
}

.itemImage {
float: right;
margin-top: -8px;
}

.topic {
color: gray;
font-style: italic;
text-decoration: none;
}

.topic:hover {
color: black;
}

.topic,
.upvoteIcon,
.downvoteIcon,
.shareIcon {
cursor: pointer;
}

@media only screen and (min-width: 768px) {
/* For desktop: */
.post,
.commentSection,
.comment {
width: 60%;
margin: auto;
}
}
113 changes: 112 additions & 1 deletion front/src/public/top-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,123 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="images/favicon.ico">

<link href="styles/bootstrap/bootstrap.min.css" rel="stylesheet">
<title>Title</title>
<link href="styles/top-list.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
<title>AList | Top-List</title>
</head>

<body>

<nav class="navbar navbar-expand-lg bg-black">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-1">
<a class="navbar-brand" href="index.html">
<img src="images/alistLogo.svg" alt="" width="80" height="30">
</a>
</div>
<div class="col-3 d-flex justify-content-around ps-5 pe-2">
<i class="fa-regular fa-compass fa-xl"></i>
</div>
<div class="col-4 ps-0">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
<div class="col-4 d-flex justify-content-around">
<i class="fa-regular fa-heart fa-xl"></i>
<i class="fa-regular fa-user fa-xl"></i>
</div>
</div>
</div>
</div>
</nav>

<div class="post mt-3 mb-3">
<div class="postInfo border bg-white d-flex gap-3 py-3">
<img src="https://github.com/twbs.png" alt="twbs" width="75" height="75"
class="profileImg rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between">
<div>
<h6 class="topics">
<a class="topic" href="#">@Basketball</a>
<a class="topic" href="#">@NBA</a>
<a class="topic" href="#">@Sports</a>
</h6>
<a class="OP text-black text-decoration-none" href="#">
UserName
</a>
</div>
</div>
</div>
<div class="list-group m-auto">
<div class="bg-white text-black d-flex gap-3 py-3 text-center justify-content-*-center align-items-center"
aria-current="true">
<div class="top w-75 m-auto">
<h2 class="topName">TOPNAME</h2>
<ol class="m-auto p-0 w-100">
<li>
Lebron James
<img src="https://github.com/twbs.png" alt="twbs" width="45" height="45" class="itemImage rounded-circle">
</li>
<li>
Anthony Davis <img src="https://github.com/twbs.png" alt="twbs" width="45" height="45"
class="itemImage rounded-circle">
</li>
<li>
Kevin Durant <img src="https://github.com/twbs.png" alt="twbs" width="45" height="45"
class="itemImage rounded-circle">
</li>
</ol>
</div>
</div>
<div class="list-group-item d-flex">
<div class="w-auto m-auto">
<img class="upvoteIcon" src="images/upvoteIcon.svg" alt="" width="35" height="35">
<img class="downvoteIcon" src="images/downvoteIcon.svg" alt="" width="35" height="35">
</div>
<img class="shareIcon m-auto" src="images/shareIcon.svg" alt="" width="35" height="35">
</div>
</div>
</div>
<div class="commentSection mb-3">
<div class="writeComment p-3">
<div class="d-flex flex-row">
<img src="https://github.com/twbs.png" alt="Profile Photo" width="40" height="40"
class="own-comment-image rounded-circle flex-shrink-0">
<textarea class="commentBox form-control ml-1 shadow-none textarea"></textarea>
</div>
<div class="mt-2 d-flex justify-content-center">
<button class="btn btn-primary btn-sm shadow-none" type="button">Post comment</button>
</div>
</div>
<div class="commentBox pb-3">
<div class="comment w-100 p-3 d-flex justify-content-center flex-column gap-2">
<div class="userInfo w-100 d-flex align-items-center gap-2">
<img src="https://github.com/twbs.png" alt="twbs" width="33" height="33"
class=" comment-image rounded-circle flex-shrink-0">
<a class="username text-black text-decoration-none w-auto" href="#">
UserName
</a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
</div>

</body>

</html>

0 comments on commit 1259a09

Please sign in to comment.