Skip to content
This repository has been archived by the owner on Dec 6, 2023. It is now read-only.

Modified UI of workspace modal #383

Closed
wants to merge 2 commits into from
Closed

Modified UI of workspace modal #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c20e05
Modified UI of workspace modal
sakshikhachane Feb 13, 2021
6099b50
Updated the changes
sakshikhachane Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 16 additions & 22 deletions src/app/components/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,38 +56,32 @@ <h5 class="modal-title" id="exampleModalLabel">Create Workspace</h5>
is_nested_folder: false
} -->
<!-- Folder name -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="folder-name">Name</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="folder-name" id="folder-name-input">
<div class="input-group">
<input type="text" class="form-control" aria-label="Default" aria-describedby="folder-name" id="folder-name-input" placeholder="Name">
<label for="folder-name" id="folder-name">Name</label>
</div>
<!-- Folder description -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="folder-description">Description</span>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Default" aria-describedby="folder-description"
id="folder-description-input">
id="folder-description-input" placeholder="Description">
<label for="folder-description" id="folder-description">Description</label>
</div>
<!-- Folder Color -->
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<span class = "input-group-text" id = "folder-colour">Color</span>
</div>
<input type="hidden" class="form-control" aria-label="Default" aria-describedby="folder-colour" value = "" id="folder-colour-input" readonly>
<button class = "folder_colour_pink" (click)="assignColour('#ee9ca7')"></button>
<button class = "folder_colour_green" (click)="assignColour('#96e6a1')"></button>
<button class = "folder_colour_blue" (click)="assignColour('#66a6ff')"></button>
<button class = "folder_colour_dark" (click)="assignColour('#274046')"></button>
</div>
<div class="input-group-color wrapper">
<input type="hidden" class="form-control" aria-label="Default" aria-describedby="folder-colour" value = "" id="folder-colour-input" readonly>
<p for="folder-color" id="folder-color" style="font-size: 17px;">Color</p>
<button class = "folder_colour_pink" (click)="assignColour('#ee9ca7')"></button>
<button class = "folder_colour_green" (click)="assignColour('#96e6a1')"></button>
<button class = "folder_colour_blue" (click)="assignColour('#66a6ff')"></button>
<button class = "folder_colour_dark" (click)="assignColour('#274046')"></button>
</div>

<!-- Error Label -->
<h5 class="error-label"><span class="badge badge-danger" id="error-label">Error Occurred!</span></h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="close()">Close</button>
<button type="button" class="btn btn-primary" (click)="createFolder()" >Save changes</button>
<button type="button" class="btn button-close" data-dismiss="modal" (click)="close()">Close</button>
<button type="button" class="btn button-save" (click)="createFolder()" >Save changes</button>
</div>
</div>
</div>
Expand Down
231 changes: 174 additions & 57 deletions src/app/components/dashboard/dashboard.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap');
@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital@1&display=swap");


.container{
.container {
min-height: calc(100vh - 68px);
margin-bottom: -50px;
.buttons {
button {
margin-right:10px;
margin-right: 10px;
}
}

.cb-files-container {
width:100%;
width: 100%;
margin: 20px auto;
columns:3;
columns: 3;
column-gap: 40px;

.cb-box {
width:100%;
width: 100%;
margin: 0 0 20px;
padding:10px;
padding: 10px;
overflow: hidden;
break-inside: avoid;
border-radius: 10px;
border: 2px solid;
transition: box-shadow .3s;
transition: box-shadow 0.3s;

img {
max-width: 100%;
Expand All @@ -36,7 +35,7 @@
padding: 0 5px;
font-size: 20px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
}

p {
Expand All @@ -54,111 +53,122 @@
span {
margin-right: 5px;
margin-top: 10px;
font-size:13px;
font-size: 13px;
}
}
}
}

@media (max-width:1200px) {
@media (max-width: 1200px) {
.cb-files-container {
columns: 3;
width: calc(100%-40px);
padding: 20px 20px 20px 0;
}
}

@media (max-width:768px) {
@media (max-width: 768px) {
.cb-files-container {
columns: 2;
}
}
@media (max-width:480px) {
@media (max-width: 480px) {
.cb-files-container {
columns: 1;
}

}
}

.container:after{
.container:after {
content: "";
display: block;
}

.folder_colour_pink{
margin:0px 7px;
width:50px;
border:none;
.folder_colour_pink {
margin-left: 6%;
margin-top: 10px;
margin-bottom: 5px;
margin-right: 5px;
width: 50px;
height: 30px;
border: none;
border-radius: 8px;
background-color:#ee9ca7;
background-color: #ee9ca7;
}

.folder_colour_pink:focus{
border:thin solid black
.folder_colour_pink:focus {
border: thin solid black;
}

.folder_colour_green{
margin:0px 7px;
width:50px;
border:none;
.folder_colour_green {
margin: 5px;
width: 50px;
height: 30px;
margin-top: 10px;
border: none;
border-radius: 8px;
background-color:#96e6a1;
background-color: #96e6a1;
}

.folder_colour_green:focus{
border:thin solid black
.folder_colour_green:focus {
border: thin solid black;
}

.folder_colour_blue{
margin:0px 7px;
width:50px;
border:none;
.folder_colour_blue {
margin: 5px;
width: 50px;
height: 30px;
margin-top: 10px;
border: none;
border-radius: 8px;
background-color:#66a6ff;
background-color: #66a6ff;
}
.folder_colour_blue:focus{
border:thin solid black
.folder_colour_blue:focus {
border: thin solid black;
}

.folder_colour_dark{
margin:0px 7px;
width:50px;
border:none;
.folder_colour_dark {
margin: 5px;
margin-top: 10px;
width: 50px;
height: 30px;
border: none;
border-radius: 8px;
background-color:#274046;
background-color: #274046;
}

.folder_colour_dark:focus{
border:thin solid black
.folder_colour_dark:focus,
.folder_colour_dark:hover {
border: thin solid black;
}

.folder_colour:focus{
border:thin solid black
.folder_colour:focus {
border: thin solid black;
}

.quote, .container:after{
.quote,
.container:after {
background-color: transparent;
height: 50px;
clear: both;
}

.quoteText{
.quoteText {
color: black;
display: flex;
justify-content: center;
font-family: 'PT Serif', serif;
font-family: "PT Serif", serif;
font-style: italic;
font-size: 16px;
font-weight: bold;
opacity: 50%;
}

.quoteAuthor{
.quoteAuthor {
color: black;
display: flex;
justify-content: center;
font-family: 'PT Serif', serif;
font-family: "PT Serif", serif;
font-style: italic;
font-size: 16px;
opacity: 50%;
Expand All @@ -168,7 +178,7 @@
.block-with-username {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis;
}

.block-with-username:hover {
Expand All @@ -178,11 +188,118 @@
text-overflow: clip;
}

.bi-plus-circle{
.bi-plus-circle {
transition: 0.3s;
fill:rgba(18, 16, 31, 0.603);
fill: rgba(18, 16, 31, 0.603);
}
.bi-plus-circle:hover {
fill: rgb(0, 0, 0);
cursor: pointer;
}

.input-group {
display: block;
width: 350px;
max-width: 100%;
height: 52px;
border: 2px solid #dddddd;
background-color: #ffffff;
box-shadow: 5px 5px 5px 0 rgba(75, 128, 182, 0.07);
margin-bottom: 22px;
margin-left: auto;
margin-right: auto;
position: relative;
font-size: 17px;
color: #aaaaaa;
transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out,
box-shadow 0.1s ease-in-out;
}

.input-group:hover {
box-shadow: 10px 14px 14px 0 rgba(0, 0, 0, 0.077);
border: 2px solid rgba(0, 0, 0, 0.329);
}

.input-group input {
position: absolute;
border: 0;
box-shadow: none;
background-color: rgba(255, 255, 255, 0);
top: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
z-index: 3;
display: block;
font-size: 17px;
transition: top 0.1s ease-in-out;
}

.input-group input::placeholder {
color: rgba(0, 0, 0, 0);
}

.input-group input:focus,
.input-group input:not(:placeholder-shown) {
top: 17px;
}

.input-group label {
position: absolute;
border: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
transition: all 0.1s ease-in-out;
}
.bi-plus-circle:hover{
fill:rgb(0, 0, 0);
cursor:pointer;

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
bottom: 20px;
font-size: 13px;
opacity: 0.7;
}

.input-group-color button:hover {
margin-top: 1px;
box-shadow: 0 4px 4px 0 rgb(0, 0, 0);
}

.wrapper {
display: flex;
}

#folder-color {
margin-top: 10px;
margin-left: 15%;
color: #aaaaaa;
}

.button-close {
background-color: black;
color: white;
padding: 10px 40px 10px 40px;
}

.button-save {
background-color: white;
color: black;
padding: 10px 20px 10px 20px;
border: 1px solid #aaaaaa;
}

.button-close:hover {
background-color: white;
color: black;
border: 1px solid black;
}

.button-save:hover {
border: 1px solid black;
}