Skip to content

Commit

Permalink
Merge pull request #111 from Midnight417/master
Browse files Browse the repository at this point in the history 
mobile responsive fixes
  • Loading branch information
@leo-cf-tian
leo-cf-tian authored May 23, 2021
2 parents 76eb6b1 + fceca56 commit 467599f
Show file tree
Hide file tree
Showing 8 changed files with 145 additions and 97 deletions.
161 changes: 88 additions & 73 deletions app/static/css/profile.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
display: flex;
margin-top: -50px;
margin-bottom: 10px;
flex-wrap: wrap;
}

.profile-info-heading {
Expand All @@ -66,6 +67,20 @@
text-transform: uppercase;
}

.edit-follow-button {
align-self: center;
margin-left: auto;
margin-top: 10px
}

@media (max-width: 600px) {
.edit-follow-button {
margin-left: 16px;
margin-right: 100px;
margin-top: 16px;
}
}

.profile-details {
margin-top: 65px;
margin-left: 20px;
Expand Down Expand Up @@ -135,7 +150,6 @@
.prof-flex {
flex-direction: column;
}

.prof-flex .file-buttons {
margin-left: 0;
}
Expand All @@ -144,117 +158,118 @@
/*==================================================
Entire Custom Tag
==================================================*/

.tag-container {
position: relative;
width: 100%;
display: inline-grid;
grid-template-rows: auto 10px;
grid-template-areas: "input" "dropdown";
position: relative;
width: 100%;
display: inline-grid;
grid-template-rows: auto 10px;
grid-template-areas: "input" "dropdown";
}

/*==================================================
Custom Tag Input + Chosen Item Display
==================================================*/
.tag-field {
border: 1px solid #eeeeee;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
padding: .25rem 0.75rem;
min-height: 1rem;
overflow-x: hidden;
flex-grow: 1;

transition: 0.25s;
.tag-field {
border: 1px solid #ddd;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
padding: .25rem 0.75rem;
min-height: 1rem;
overflow-x: hidden;
flex-grow: 1;
transition: 0.25s;
}

.tag-field-focus {
border: #5aa3cf solid 1px;
box-shadow: 0px 0px 0px 3px #b1ddf8;
border: #5aa3cf solid 1px;
box-shadow: 0px 0px 0px 3px #b1ddf8;
}

.tag-input {
width: 2rem !important;
max-width: 100% !important;
flex-grow: 1 !important;
border: none !important;
box-shadow: none !important;
color: #505050 !important;
font-weight: 700 !important;
font-family: Poppins, sans-serif !important;
font-size: 1em !important;
width: 2rem !important;
max-width: 100% !important;
flex-grow: 1 !important;
border: none !important;
box-shadow: none !important;
color: #5a5a5a !important;
font-weight: 700 !important;
font-family: Poppins, sans-serif !important;
font-size: 1em !important;
}

.tag-input:focus {
outline: none !important;
outline: none !important;
}

/*==================================================
Custom Tag Input Prediction Dropdown
==================================================*/
.tag-dropdown {
position: absolute;
min-height: 1.5rem;
box-sizing: border-box;
width: 100%;
margin-top: -4px;
z-index: 2;
display: none;
grid-area: dropdown;

transition: box-shadow 0.25s;
.tag-dropdown {
position: absolute;
min-height: 1.5rem;
box-sizing: border-box;
width: 100%;
margin-top: -4px;
z-index: 2;
display: none;
grid-area: dropdown;
transition: box-shadow 0.25s;
}

.tag-field-focus+.tag-dropdown-focus {
background-color: white;
border: #5aa3cf solid 1px;
border-top: 1px solid #eeeeee;
box-shadow: 0px 3px 0px 0px #b1ddf8, 1px 2px 0 2px #b1ddf8, -1px 2px 0 2px #b1ddf8;
border-radius: 0 0 4px 4px;
display: block;
background-color: white;
border: #5aa3cf solid 1px;
border-top: 1px solid #eeeeee;
box-shadow: 0px 3px 0px 0px #b1ddf8, 1px 2px 0 2px #b1ddf8, -1px 2px 0 2px #b1ddf8;
border-radius: 0 0 4px 4px;
display: block;
}

.dropdown-item {
line-height: 3rem;
padding-left: 0.5rem;
background-color: white;
cursor: pointer;
color: #505050;
font-weight: 700;
font-family: Poppins, sans-serif;
font-size: 1em;
line-height: 3rem;
padding-left: 0.5rem;
background-color: white;
cursor: pointer;
color: #505050;
font-weight: 700;
font-family: Poppins, sans-serif;
font-size: 1em;
}

.dropdown-item:last-child {
border-radius: 0 0 2.5px 2.5px;
border-radius: 0 0 2.5px 2.5px;
}

.dropdown-item:hover,
.dropdown-item:focus {
outline: none;
background-color: #5aa3cf;
color: white;
.dropdown-item:hover, .dropdown-item:focus {
outline: none;
background-color: #5aa3cf;
color: white;
}

/*==================================================
Custom Tag Input Chosen Items
==================================================*/

.chosen-item {
margin: 0.2rem 0.2rem;
padding: 0 0.75rem;
background-color: #e2eefc;
border-radius: 2rem;
display: inline-flex;
align-items: center;
color: #505050;
font-weight: 700;
font-family: Poppins, sans-serif;
font-size: 1em;
margin: 0.2rem 0.2rem;
padding: 0 0.75rem;
background-color: #e2eefc;
border-radius: 2rem;
display: inline-flex;
align-items: center;
color: #505050;
font-weight: 700;
font-family: Poppins, sans-serif;
font-size: 1em;
}

.delete-button {
height: 16px;
width: 16px;
margin-left: 0.5rem;
cursor: pointer;
}
height: 16px;
width: 16px;
margin-left: 0.5rem;
cursor: pointer;
}
21 changes: 21 additions & 0 deletions app/static/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,12 +292,33 @@ input:focus {
footer {
background-color: var(--grey-dark);
margin-top: 0;
overflow-x: hidden;
}

.footer-title-par {
font-size: 1.5rem;
}

.main-footer {
display: grid;
grid-template-columns: auto auto auto;
grid-template-areas: "brand navigation more";
}

@media (max-width: 600px) {
.main-footer {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-template-areas: "navigation more" "brand brand";
margin-left: 1rem;
}

#footer-brand {
margin-top: 3rem;
}
}

.reverse {
display: flex;
flex-direction: column-reverse;
Expand Down
2 changes: 1 addition & 1 deletion app/static/js/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ if (slideshow) {
const localstore = window.localStorage;

function betaLaunch(login) {
if (!localstore.getItem("launch-modal") && new Date() <= Date.parse('22 May 2021 00:00:00 EST')) {
if (!localstore.getItem("launch-modal") && new Date() <= Date.parse('18 June 2021 00:00:00 EST')) {
window.location.hash = "launch-modal-0";
localstore.setItem("launch-modal", true);
} else {
Expand Down
42 changes: 27 additions & 15 deletions app/static/js/taginput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,31 +27,32 @@ function generateTagInputs() {
}
});

console.log(dictionary)

Array.from(field.options).map(opt => commonChoices.push(opt.value));
const chosenChoices = [];
[...field.options].map(opt => {
if (!chosenChoices.includes(opt.innerHTML) && opt.selected) {
chosenChoices.push(opt.innerHTML);
}
});

//Renders custom tag input with given props in place of input
field.outerHTML = `
<div class="tag-container ">
<div class="tag-field ${className}" data-tags-display="${id}">
<input type="text" class="tag-input" data-tags-input="${id}" onfocus="inputFocus(event, 'focus')"
onblur="inputFocus(event, 'blur')" autocomplete="off" max="24">
</div>
<div data-tags="${id}" data-focus-index="-1" class="tag-dropdown"></div>
<select style="display: none;" name="${name}" id="${id}" ${required ? "required" : ""} multiple>
</select>
</div>
`
renderList(chosenChoices, id);
document.querySelector(`[data-tags-display="${id}"]`).innerHTML += `
<input type="text" class="tag-input" data-tags-input="${id}" onfocus="inputFocus(event, 'focus')"
onblur="inputFocus(event, 'blur')" autocomplete="off" max="24">
`
changeSelectValue(chosenChoices, id);
}
}

//Delete button for tags
const deleteButton =
`<svg onclick="deleteItem(event)" class="delete-button" viewBox="0 0 20 20" fill="none">
<path d="M10 0C15.53 0 20 4.47 20 10C20 15.53 15.53 20 10 20C4.47 20 0 15.53 0 10C0 4.47 4.47 0 10 0ZM13.59 5L10 8.59L6.41 5L5 6.41L8.59 10L5 13.59L6.41 15L10 11.41L13.59 15L15 13.59L11.41 10L15 6.41L13.59 5Z" fill="#0071BC"/>
</svg>`

//Implements field interactions
const tagFields = document.getElementsByClassName("tag-field");
for (let i = 0; i < tagFields.length; i++) {
Expand Down Expand Up @@ -509,6 +510,12 @@ function inputFocus(e, state) {
//Renders chosen items list into the tag field
function renderList(list, tagId) {

//Delete button for tags
const deleteButton =
`<svg onclick="deleteItem(event)" class="delete-button" viewBox="0 0 20 20" fill="none">
<path d="M10 0C15.53 0 20 4.47 20 10C20 15.53 15.53 20 10 20C4.47 20 0 15.53 0 10C0 4.47 4.47 0 10 0ZM13.59 5L10 8.59L6.41 5L5 6.41L8.59 10L5 13.59L6.41 15L10 11.41L13.59 15L15 13.59L11.41 10L15 6.41L13.59 5Z" fill="#0071BC"/>
</svg>`

//Records chosen items list
const tagDisplay = document.querySelector(`[data-tags-display="${tagId}"]`);

Expand All @@ -532,15 +539,20 @@ function renderList(list, tagId) {
function changeSelectValue(list, tagId) {
//Records chosen items list
const tagData = document.getElementById(tagId);
tagData.innerHTML = "";

//Checks if list exists
if (list && list.length) {
tagData.innerHTML = "";

//Add option to list
for (let i = 0; i < list.length; i++) {
tagData.innerHTML += `<option value="${list[i]}" selected></option>`;
tagData.innerHTML += `<option value="${list[i]}"></option>`;
}

//Selects all options in list
for (var i = 0; i < tagData.options.length; i++) {
tagData.options[i].selected = true;
}
} else {
tagData.innerHTML = "";
}
}

Expand Down
8 changes: 4 additions & 4 deletions app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,13 +91,13 @@
<!-- Footer -->
<footer style="background-color: #FFFFFF;" id="footer">
<div class="content">
<div class="u-flex u-justify-flex-start footer-content">
<div id="footer-brand" class="level-items u-text-left" style="margin-right: 200px;">
<div class="main-footer">
<div id="footer-brand" class="level-items u-text-left" style="margin-right: 200px; grid-area: brand;">
<img src="{{ static('img/logo.png') }}" width="80">
<p class="u-text-left black" style="margin-bottom: 0; font-weight: 500;"><span class="">&copy; 2021</span> HackItForward</p>
<p class="u-text-left black" style="margin-top: 0; font-weight: 500;">Powered by <a class="u u-LR" href="https://kurius.ca" target="_blank" rel="noopener" style="color: #518BC4;">Kurius</a></p>
</div>
<div id="footer-navigation" style="margin-right: 80px;">
<div id="footer-navigation" style="margin-right: 80px; grid-area: navigation;">
<ul class="no-bullets u-text-left">
<h5 class="blue">Navigation</h5>
<a href="{{ url('index') }}">
Expand All @@ -111,7 +111,7 @@ <h5 class="blue">Navigation</h5>
</a>
</ul>
</div>
<div>
<div style="grid-area: more;">
<ul class="no-bullets u-text-left">
<h5 class="blue">More</h5>
<a href="https://github.com/KuriusMTL/HackItForward/issues/new?labels=bug&template=bug_report.md" target="_blank" rel="noopener">
Expand Down
2 changes: 1 addition & 1 deletion app/templates/edit_profile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,6 @@ <h2>Edit Profile</h2>
placeholder_text_single: ' '
});
</script>
<!--<script src="{{ static('js/taginput.js') }}"></script>-->
<script src="{{ static('js/taginput.js') }}"></script>
<!--For tag input, which is not supported by backend yet-->
{% endblock %}
4 changes: 2 additions & 2 deletions app/templates/project_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
{% for project in projects %}
<div class="modal modal-large modal-animated--zoom-in" id="{{ project.name }}">
<a href="#searchModalDialog" class="modal-overlay close-btn" aria-label="Close"></a>
<div class="modal-content" style="border-radius: 8px; background-color: #F6F8FB; min-height: 100%; min-width: 100%; margin-top: 5%">
<div class="modal-body" style="padding: 4rem 4rem; max-height: 85vh;">
<div class="modal-content" style="border-radius: 8px; background-color: #F6F8FB; height: 85vh; width: 90vw; display: flex; flex-direction: column;">
<div class="modal-body" style="padding: 4rem 4rem; max-height: 100%; flex-grow: 1;">
<div class="row">
<div style="padding: 0 0.5rem">
<h2>{{ project.name }}</h2>
Expand Down
Loading

0 comments on commit 467599f

Please sign in to comment.