Skip to content

Commit

Permalink
Merge pull request #11 from CodeURJC-DAW-2022-23/fix/create-list
Browse files Browse the repository at this point in the history
fix: create list page
  • Loading branch information
skuzow authored Feb 18, 2023
2 parents 1259a09 + 3b87dd3 commit bf7685c
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 39 deletions.
62 changes: 49 additions & 13 deletions front/src/public/create-list.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
<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">
<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">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/create-list.css">
<script src="scripts/bootstrap/bootstrap.bundle.min.js"></script>
Expand All @@ -15,10 +18,38 @@
</head>

<body class="text-center">
<div class="accordion w-60" id="accordion">

<input class="form-control mb-2" list="datalistOptions" id="exampleDataList" placeholder="Type to add topic...">
<datalist id="datalistOptions">
<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="accordion mt-3 mb-3" id="accordion">

<input class="form-control mb-2" id="topTitle" placeholder="Write a title...">

<input class="form-control mb-2" list="topicOptions" id="topicList" placeholder="Type to add topic...">
<datalist id="topicOptions">
<option value="Sports">
<option value="Anime">
<option value="Characters">
Expand All @@ -36,8 +67,9 @@ <h2 class="accordion-header" id="headingOne">
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordion">
<div class="accordion-body">
<img class="img-fluid rounded float-right mb-2" id="imgOne" src="#" alt="">
<input class="form-control mb-2" type="text" id="formDescriptionOne" placeholder="description...">
<img class="img-fluid rounded mt-3" id="imgOne" src="#" alt="">
<input class="form-control mt-3 mb-2" type="text" id="formDescriptionOne"
placeholder="Write a description...">
<input class="form-control" type="file" accept="image/*" id="formFileOne"
onchange="loadFile(event, 'imgOne')">
</div>
Expand All @@ -54,8 +86,9 @@ <h2 class="accordion-header" id="headingTwo">
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordion">
<div class="accordion-body">
<img class="img-fluid rounded float-right mb-2" id="imgTwo" src="#" alt="">
<input class="form-control mb-2" type="text" id="formDescriptionTwo" placeholder="description...">
<img class="img-fluid rounded mt-3" id="imgTwo" src="#" alt="">
<input class="form-control mt-3 mb-2" type="text" id="formDescriptionTwo"
placeholder="Write a description...">
<input class="form-control" type="file" accept="image/*" id="formFileTwo"
onchange="loadFile(event, 'imgTwo')">
</div>
Expand All @@ -72,8 +105,9 @@ <h2 class="accordion-header" id="headingThree">
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordion">
<div class="accordion-body">
<img class="img-fluid rounded float-right mb-2" id="imgThree" src="#" alt="">
<input class="form-control mb-2" type="text" id="formDescriptionThree" placeholder="description...">
<img class="img-fluid rounded mt-3" id="imgThree" src="#" alt="">
<input class="form-control mt-3 mb-2" type="text" id="formDescriptionThree"
placeholder="Write a description...">
<input class="form-control" type="file" accept="image/*" id="formFileThree"
onchange="loadFile(event, 'imgThree')">
</div>
Expand All @@ -90,8 +124,9 @@ <h2 class="accordion-header" id="headingFour">
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#accordion">
<div class="accordion-body">
<img class="img-fluid rounded float-right mb-2" id="imgFour" src="#" alt="">
<input class="form-control mb-2" type="text" id="formDescriptionFour" placeholder="description...">
<img class="img-fluid rounded mt-3" id="imgFour" src="#" alt="">
<input class="form-control mt-3 mb-2" type="text" id="formDescriptionFour"
placeholder="Write a description...">
<input class="form-control" type="file" accept="image/*" id="formFileFour"
onchange="loadFile(event, 'imgFour')">
</div>
Expand All @@ -108,8 +143,9 @@ <h2 class="accordion-header" id="headingFive">
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
data-bs-parent="#accordion">
<div class="accordion-body">
<img class="img-fluid rounded float-right mb-2" id="imgFive" src="#" alt="">
<input class="form-control mb-2" type="text" id="formDescriptionFive" placeholder="description...">
<img class="img-fluid rounded mt-3" id="imgFive" src="#" alt="">
<input class="form-control mt-3 mb-2" type="text" id="formDescriptionFive"
placeholder="Write a description...">
<input class="form-control" type="file" accept="image/*" id="formFileFive"
onchange="loadFile(event, 'imgFive')">
</div>
Expand Down
2 changes: 0 additions & 2 deletions front/src/public/scripts/create-list.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
const loadFile = function (event, id) {
const image = document.getElementById(id);
image.style.height = '100px';
image.style.width = '100px';
image.src = URL.createObjectURL(event.target.files[0]);
};
7 changes: 0 additions & 7 deletions front/src/public/scripts/js/profile.js

This file was deleted.

63 changes: 47 additions & 16 deletions front/src/public/styles/create-list.css
Original file line number Diff line number Diff line change
@@ -1,28 +1,59 @@
html,
body {
height: 100%;
#topTitle,
#topicList {
width: 90%;
margin: auto;
}

body {
display: flex;
align-items: center;
justify-content: center;
.accordion-button:not(.collapsed)::after {
background: var(--bs-accordion-btn-icon);
filter: brightness(1000%);
-webkit-filter: brightness(1000%);
}

img {
.accordion-button:not(.collapsed) {
background-color: #2d474f;
color: white;
}

.accordion-button:focus {
border-color: #2d474f;
box-shadow: none;
}

.accordion-body img[src='#'] {
display: none;
}

.accordion-body img {
width: 200px;
height: 200px;
object-fit: cover;
}

.accordion-item {
min-width: 398.5px;
.accordion {
width: 100%;
}

.btn-primary {
background-color: #2d474f;
border: 0;
.accordion-body {
padding-top: 0px;
}

.accordion-button {
font-size: 20px;
}

.btn-primary:hover,
.btn-primary:active:focus {
background-color: #63b1b1;
@media only screen and (min-width: 768px) {
/* For desktop: */
#topTitle,
#topicList {
width: 100%;
}
.accordion {
width: 60%;
margin: auto;
}
.accordion-body img {
width: 300px;
height: 300px;
}
}
30 changes: 29 additions & 1 deletion front/src/public/styles/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,32 @@
body {
align-items: center;
background-color: black;
overflow: hidden;
}

/* nav */
.row {
width: 100vw;
}

.fa-regular {
color: white;
}

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

i {
cursor: pointer;
}

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

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

0 comments on commit bf7685c

Please sign in to comment.