rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed mobile view of pages on projects page

Browse Source 
Signed-off-by: rodude123 <rodude123@gmail.com>
This commit is contained in:
Rohit Pai 2023-02-24 02:15:20 +00:00
parent 048dc0b58b
commit d4cc915524
7 changed files with 47 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/editor/editor.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Editor</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><nav class="sideNav"><a href="#" class="closeBtn" id="navClose">&times;</a><ul><li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li><li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li><li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li></ul></nav><main class="editor" style="margin-left: 250px;"><div class="title"><span id="navOpen">&#9776;</span><h1>Editor</h1></div><section id="curriculumVitae"><h2>curriculum vitae</h2><div class="cvGrid"><div><h3>Education</h3><div class="editorContainer"><form action="" method="POST" id="addEdu"><div class="formControl"><label for="dateFromE">Date From</label> <input type="date" id="dateFromE" name="dateFromE" required></div><div class="formControl"><label for="dateToE">Date To</label> <input type="date" id="dateToE" name="dateToE" required></div><div class="formControl"><label for="grade">Grade</label> <input type="text" id="grade" name="grade" required></div><div class="formControl"><label for="courseTitle">Course Title</label> <input type="text" id="courseTitle" name="courseTitle" required></div><div class="error hidden" id="eduError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new course"></form><div class="timeline" id="edu"></div></div></div><div><h3>Work</h3><div class="editorContainer"><form action="" method="POST" id="addWork"><div class="formControl"><label for="dateFromW">Date From</label> <input type="date" id="dateFromW" name="dateFromW" required></div><div class="formControl"><label for="dateToW">Date To</label> <input type="date" id="dateToW" name="dateToW"></div><div class="formControl"><label for="company">Company</label> <input type="text" id="company" name="company" required></div><div class="formControl"><label for="area">Area</label> <input type="text" id="area" name="area" required></div><div class="formControl"><label for="jobTitle">Job Title</label> <input type="text" id="jobTitle" name="jobTitle" required></div><div class="error hidden" id="workError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Add new job"></form><div class="timeline" id="work"></div></div></div></div></section><section id="projects"><h2>projects</h2><div class="projectsGrid"><form action="" id="addProj"><div class="formControl"><label for="projTitle">Title</label> <input type="text" name="projTitle" id="projTitle" required></div><div class="formControl"><label class="checkContainer" for="isMainProject">Is It The Main Project <input type="checkbox" id="isMainProject" name="isMainProject"> <span class="checkmark"></span></label></div><div class="formControl"><label for="projImg">Image</label> <input type="file" name="projImg" id="projImg"></div><div class="formControl"><label for="projInfo">Description</label> <textarea name="projInfo" id="projInfo" required></textarea></div><div class="formControl"><label for="projLink">Project Link</label> <input type="text" name="projLink" id="projLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)"></div><div class="formControl"><label for="gitLink">Git Link</label> <input type="text" name="gitLink" id="gitLink" pattern="https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)" required></div><div class="error hidden" id="projError"><button class="close" type="button">&times;</button><div></div></div><input type="submit" value="Add new Project" class="btn btnPrimary boxShadowIn boxShadowOut"></form><div id="projList"></div></div></section></main><script src="js/editor.js"></script></body></html>

26
src/css/main.css
View File

@ -72,7 +72,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 75px; right: 75px;
top: -360px; top: 0;
} }
nav ul { nav ul {
@ -282,6 +282,12 @@
text-align: center; text-align: center;
} }
section#allProjects #otherProj .oProjItem {
width: 45%;
}
/****** Contact Styles ******/
section#contact { section#contact {
flex-direction: column; flex-direction: column;
@ -294,7 +300,6 @@
} }
div#findMe .findMeContainer { div#findMe .findMeContainer {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -331,9 +336,24 @@
section#curriculumVitae .timelineItem:before { section#curriculumVitae .timelineItem:before {
right: unset; right: unset;
left: unset; left: unset;
border:none border: none;
} }
section#allProjects #mainProj {
width: auto;
}
section#allProjects #otherProj {
flex-direction: column;
align-items: center;
}
section#allProjects #otherProj .oProjItem {
width: auto;
}
/****** Contact Styles ******/
div#findMe .socialIcons { div#findMe .socialIcons {
flex-direction: column; flex-direction: column;
} }

29
src/css/projects.css
View File

@ -104,7 +104,7 @@ section#allProjects {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
padding: 0 2.5rem; /*padding: 0 2.5rem;*/
gap: 5em; gap: 5em;
} }
@ -119,29 +119,30 @@ section#allProjects #mainProj {
-moz-border-radius: 10px; -moz-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
padding: 1.5em 2em; padding: 1.5em 2em;
margin-top: 3em; margin: 3em 2.5rem 0;
width: 50%; width: 50%;
} }
section#allProjects #otherProj .oProjItem {
flex-direction: column;
/*width: 30%;*/
}
section#allProjects #mainProj img { section#allProjects #mainProj img {
width: 100%; width: 100%;
max-width: 30rem; max-width: 30rem;
} }
section#allProjects #otherProj { section#allProjects #otherProj {
/*display: flex;*/ display: flex;
/*flex-direction: row;*/ flex-direction: row;
/*justify-content: flex-start;*/ justify-content: space-between;
/*align-items: center;*/ align-items: stretch;
/*flex-wrap: wrap;*/ flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
gap: 2rem; gap: 2rem;
border-top: 2px solid var(--grey);
padding: 5em 2.5rem 0;
}
section#allProjects #otherProj .oProjItem {
flex-direction: column;
width: 30%;
height: auto;
} }
section#allProjects #otherProj img { section#allProjects #otherProj img {

8
src/editor/css/editor.css
View File

@ -4,7 +4,7 @@ textarea {
resize: none; resize: none;
} }
section#curriculumVitae, section#projects, section#settings { section#curriculumVitae, section#projects {
margin: 0 2em; margin: 0 2em;
} }
@ -41,11 +41,11 @@ div.editorContainer > *, div.projectsGrid > * {
} }
section#projects { section#projects {
display: block; display: none;
} }
section#curriculumVitae, section#settings { section#curriculumVitae {
display: none; display: block;
} }
div.modifyBtnContainer { div.modifyBtnContainer {

4
src/editor/editor.html
View File

@ -11,8 +11,8 @@
<nav class="sideNav"> <nav class="sideNav">
<a href="#" class="closeBtn" id="navClose">&times;</a> <a href="#" class="closeBtn" id="navClose">&times;</a>
<ul> <ul>
<li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li> <li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
<li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li> <li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
<li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li> <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
</ul> </ul>
</nav> </nav>