Skip to content

tor - trek - octos #34

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
torshimizu wants to merge 16 commits into
base: master
Choose a base branch
from
Open

tor - trek - octos #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
30a5bc2
added index pages
torshimizu May 24, 2018
2dff1cd
starter code for wave 1
torshimizu May 24, 2018
057fe59
updated all trips code to report errors and to style trips as a table
torshimizu May 24, 2018
fc60b60
all trips table now only has id and name
torshimizu May 24, 2018
b73b463
added functions to see trip, trip reservation form, and reserve a trip
torshimizu May 25, 2018
145d337
table styles, alternate row coloring
torshimizu May 25, 2018
f69b5a8
adding optional type to status-message
torshimizu May 25, 2018
edafe8f
added a header border background image
torshimizu May 25, 2018
c0d1969
changed cursor to finger when hovering over trip name
torshimizu May 25, 2018
d89dfd0
working on error display
torshimizu May 25, 2018
988c31a
basic styling of error messages
torshimizu May 25, 2018
66b9156
added starter code for selective search optional
torshimizu May 29, 2018
055519c
working code for getting trips by continent, weeks, or budget
torshimizu May 29, 2018
544af54
dryer code for weeks and budget query search
torshimizu May 29, 2018
f6a9811
better coloring for error messages
torshimizu May 29, 2018
442b086
updated how a status: 500 error is handled
torshimizu May 29, 2018
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
141 changes: 141 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
body, .button {
font-family: 'Karla', sans-serif;
}

main {
display: grid;
grid-template-columns: 50% 1fr;
grid-template-rows: 5vh 50vh 1fr;
grid-column-gap: 1em;
}

h1 {
font-size: 2.25rem;
margin-top: 4px;
margin-bottom: 4px;
}

header > h1, h3 {
font-family: 'Permanent Marker', cursive;
}

.button {
width: 8rem;
height: 2rem;
font-size: 1rem;
background-color: white;
border-color: rgb(64, 96, 119);
}

.button:focus {
outline: none;
}

.button:hover {
background-color: rgb(240, 216, 232);
}

.header-background {
min-height: 0.9vh;
background-image: url('space-background.jpeg');
}

.trip-table, #trip-info {
overflow-x: scroll;
}

.trip-table {
max-height: 75vh;
margin-top: 2vh;
}

#status-message {
grid-column: 1 / span 2;
}

.success {
color: rgb(38, 175, 11);
}

.failure {
color: rgba(218, 52, 52, 0.65);
}

#current-trips {
grid-row: 2 / span 2;
}

#trip-info {
grid-column-start: 2;
}

#trip-list {
width: 100%;
}

#trip-list td {
cursor: pointer;
}

#trip-list tr:nth-child(odd) {
background-color: rgba(147, 147, 147, 0.16);
}

#trip-form {
grid-column-start: 2;
grid-row-start: 3;
}

#trip-form .button {
margin-top: 2vh;
}

#search-filters {
display: inline;
}

i {
border: solid black;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 3px;
margin-bottom: 3px;
margin-left: 5px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

/* DROPDOWN */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content p {
color: black;
padding: 10px 16px;
text-decoration: none;
display: block;
margin-bottom: 0;
margin-top: 0
}

/* Change color of dropdown links on hover */
.dropdown-content p:hover {background-color: rgb(240, 216, 232)}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
56 changes: 56 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Octo Trips</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Karla|Permanent+Marker" rel="stylesheet">



</head>
<body>
<header>
<h1>TREK</h1>
<div class="header-background"></div>
</header>

<main>
<section id='status-message'></section>

<section id='current-trips'>

<section id='filters'>
<button type="button" id='load' class='button'>See All Trips</button>
<div class="dropdown">
<button type="button" class='dropbtn button'>Search by</button>
<div class="dropdown-content" id="search-by">
<p id='continent'>Continent</p>
<p id='budget'>Max Budget</p>
<p id='weeks'>Max Weeks</p>
</div>
</div>
<div id='search-filters'></div>
</section>



<div class='trip-table'>
<table id='trip-list'></table>
</div>
</section>

<section id='trip-info'></section>

<section id='trip-form'></section>

</main>

</body>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript" src="index.js"></script>
</html>
Loading