Skip to content

Style changes masaya #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Style changes masaya #6

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
39b5f8d
style changes, made site responsive
masayaShinoda Oct 21, 2020
790952c
fixed error message size
masayaShinoda Oct 21, 2020
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
1 change: 1 addition & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const app = express();
const router = require('./routes/home');
const bodyParser = require("body-parser");
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public')); // directory that serves additional scss
app.use(bodyParser.urlencoded({extended: false}));
app.use(router);
app.listen(process.env.PORT,() => {
Expand Down
85 changes: 85 additions & 0 deletions public/scss/styles.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions public/scss/styles.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

85 changes: 85 additions & 0 deletions public/scss/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
//viewport breakpoints
$desktop-bp: 1024px;
$tablet-bp: 1023px;
$mobile-bp: 480px;

.upper-div {
display: flex;
place-content: end;
flex-wrap: wrap;
padding: 2.5vh 2.5vw;
margin-top: 2.5vh;
// border: 1px solid red; //debug
span {
//github buttons
margin: 0 0.625vmin;
}
}

.mid-div {
display: flex;
flex-direction: column;
place-content: center;
// border: 1px solid blue; //debug

.pure-g {
place-content: center;
}
.form-container {
// border: 1px solid red; //debug
form {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
// border: 1px solid green; //debug
//desktop and tablet viewport only
#userText {
min-width: 50%;
margin-right: 1.25vmin;
}
#timeDropdown {
margin-right: 1.25vmin;
}
#submitbutton {
padding: 0.6rem 1.1rem !important;
margin-top: 0;
}
//mobile viewport
@media (max-width: $mobile-bp) {
#userText {
display: inline-block;
margin-bottom: 0;
}
#submitbutton {
//pushes the submit button down
display: block;
margin: 0.7rem 0;
}
}
}
}
@media (max-width: $tablet-bp) {
.textbanner {
}
.pure-u-1-2,
.pure-u-12-24 {
width: 75%;
}
}
@media (max-width: $mobile-bp) {
.textbanner {
font-size: 1.8rem;
max-width: 35ch;
}
.pure-u-1-2,
.pure-u-12-24 {
width: 92%;
}
}
}

//inputs
.pure-form {
// border: 1px solid green; //debug
}
120 changes: 64 additions & 56 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script async defer src="https://buttons.github.io/buttons.js"></script>
<title>First Contrib</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link href="/scss/styles.css" rel="stylesheet" type="text/css">
<style>

p{
Expand Down Expand Up @@ -125,69 +126,76 @@
</script>
</head>
<body onload="script();">
<div class="pure-g search">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3">
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search/issues" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Issue krishnanunnir/opensource-first-contrib-search on GitHub">Issue</a>
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Star krishnanunnir/opensource-first-contrib-search on GitHub">Star</a>
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search/fork" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Fork krishnanunnir/opensource-first-contrib-search on GitHub">Fork</a>
<a class="github-button" href="https://github.com/krishnanunnir" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Follow @krishnanunnir on GitHub">Follow @krishnanunnir</a>
</div>
<div class="pure-u-1-3"></div>
<!-- <div class="pure-g search"> -->
<!-- <div class="pure-u-1-3"></div> -->
<!-- <div class="pure-u-1-3"> -->
<div class="upper-div">
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search/issues" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Issue krishnanunnir/opensource-first-contrib-search on GitHub">Issue</a>
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Star krishnanunnir/opensource-first-contrib-search on GitHub">Star</a>
<a class="github-button" href="https://github.com/krishnanunnir/opensource-first-contrib-search/fork" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Fork krishnanunnir/opensource-first-contrib-search on GitHub">Fork</a>
<a class="github-button" href="https://github.com/krishnanunnir" data-color-scheme="no-preference: light; light: light; dark: light;" data-size="large" data-show-count="true" aria-label="Follow @krishnanunnir on GitHub">Follow @krishnanunnir</a>
</div>
<!-- <div class="pure-u-1-3"></div> -->
<!-- </div> -->

<div class="pure-g search textbanner">
<div class="pure-u-1-4"></div>
<div class="pure-u-1-2">Search for issues to contribute to. Use your github username.<span id="greentext"> Beginner friendly issues marked in green.</span></div>
<div class="pure-u-1-4"></div>
</div>
<div class="pure-g">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3">
<form action="/instance" method="get" class="pure-form">
<input type="text" name="username" class="inputfield" id="userText" placeholder="Enter your github username" >
<select name="time" class="inputfield" id="timeDropdown">
<option value="1" >Past day</option>
<option value="7">Past Week</option>
<option value="30">Past Month</option>
<option value="365">Past Year</option>
</select>
<button type="submit" id="submitbutton">go!</button>
</form>
<br/>
<div class="mid-div">

<div class="pure-g search textbanner">
<!-- <div class="pure-u-1-4"></div> -->
<div class="pure-u-1-2">Search for issues to contribute to. Use your github username.<span id="greentext"> Beginner friendly issues marked in green.</span></div>
<!-- <div class="pure-u-1-4"></div> -->
</div>
<div class="pure-u-1-3"></div>
</div>
<% if(error){ %>
<div id="error">
<div class="pure-g">
<div class="pure-u-1-4"></div>
<div class="pure-u-1-2 error">
<%= error %>
</div>
<div class="pure-u-1-4"></div>
</div>
<div class="pure-g">
<!-- <div class="pure-u-1-3"></div> -->
<div class="pure-u-1-2 form-container">
<form action="/instance" method="get" class="pure-form">
<input type="text" name="username" class="inputfield" id="userText" placeholder="Enter your github username" >
<select name="time" class="inputfield" id="timeDropdown">
<option value="1" >Past day</option>
<option value="7">Past Week</option>
<option value="30">Past Month</option>
<option value="365">Past Year</option>
</select>
<button type="submit" id="submitbutton">Go!</button>
</form>
<br/>
</div>
<!-- <div class="pure-u-1-3"></div> -->
</div>
<% } %>
<div id="all-issue">
<% issues.forEach(function(issue) { %>
<% if(error){ %>
<div id="error">
<div class="pure-g">
<div class="pure-u-1-4"></div>
<% if(!issue["beginnerfriendly"]){%>
<div class="pure-u-1-2 github-issue">
<% }else{ %>
<div class="pure-u-1-2 github-issue-first-friendly">
<% } %>
<div class="issue-title">
<h5><a href="<%= issue.url %>"><%= issue.repository %>: <%= issue.title %></a></h5>
</div>
<div class="issue-desc">
<%- issue.description %>
<!-- <div class="pure-u-1-4"></div> -->
<div class="pure-u-1-2 error">
<%= error %>
</div>
<!-- <div class="pure-u-1-4"></div> -->
</div>
</div>
<% } %>
<div id="all-issue">
<% issues.forEach(function(issue) { %>
<div class="pure-g">
<!-- <div class="pure-u-1-4"></div> -->
<% if(!issue["beginnerfriendly"]){%>
<div class="pure-u-1-2 github-issue">
<% }else{ %>
<div class="pure-u-1-2 github-issue-first-friendly">
<% } %>
<div class="issue-title">
<h5><a href="<%= issue.url %>"><%= issue.repository %>: <%= issue.title %></a></h5>
</div>
<div class="issue-desc">
<%- issue.description %>
</div>
</div>
<!-- <div class="pure-u-1-4"></div> -->
</div>
<div class="pure-u-1-4"></div>
</div>
<% }); %>
<% }); %>
</div>


</div>

</body>
</html>