DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked some css, made our friendly button look better and footer is stuck for good

Browse Source
This commit is contained in:
Derek Chen
2023-09-09 19:06:59 -05:00
parent e6c0bbfad8
commit bbd76cbd47
2 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/index.html
View File

@@ -75,20 +75,20 @@
</select> </select>
<br><br> <br><br>
</form> </form>
<button type="button" id="subBut">Submit</button><br><br> <button type="button" id="subBut" class="submit-button">Submit</button><br><br>
</form> </form>
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw"> <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
<!--Bar graph stuff--> <!--Bar graph stuff-->
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas> <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
</div> </div>
</div> </div>
<footer>Created by Derek Chen <div class="footy">Created by Derek Chen
<!-- because VAPA lecture was a bit boring that day --> <!-- because VAPA lecture was a bit boring that day -->
<iframe <iframe
src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large" src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="170" height="30" title="GitHub"> frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
</iframe> </iframe>
</footer> </div>
</div> </div>
<script src='main.js'></script> <script src='main.js'></script>
</body> </body>

25
docs/main.css
View File

@@ -8,12 +8,14 @@
--footer-size: 10px; --footer-size: 10px;
--background-gradient: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%); --background-gradient: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%);
--link-color: #2c82c9; --link-color: #2c82c9;
font-family: 'Helvetica Neue', sans-serif;
} }
body { body {
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
background: #1b1a2a; background: #1b1a2a;
background: var(--background-gradient); background: var(--background-gradient);
margin: 0;
} }
a { a {
@@ -25,11 +27,11 @@ main {
padding: 10%; padding: 10%;
} }
footer { .footy {
background-color: #2e2d2d; background-color: #2e2d2d;
color: #fff; color: #fff;
padding: 1%; padding: 1%;
position: absolute; position: relative;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@@ -38,6 +40,7 @@ footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-self: flex-end;
} }
* { * {
@@ -50,9 +53,25 @@ footer {
grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(100px, auto);
text-align: center; text-align: center;
color: #fff; color: #fff;
margin-top: 10px;
min-height: 100vh;
/* background-color: rgba(0, 0, 0, .4); */ /* background-color: rgba(0, 0, 0, .4); */
} }
.submit-button {
display: flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
align-self: center;
gap: 15px;
border-radius: 10px;
border: 2px solid #000;
max-width: 150px;
width: 100%;
font-size: 16px;
}
.about-text { .about-text {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
border: 3px solid #f1f1f1; border: 3px solid #f1f1f1;
@@ -75,6 +94,8 @@ footer {
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
padding: var(--bg-form-padding); padding: var(--bg-form-padding);
display: flex;
flex-direction: column;
} }
.chart-container { .chart-container {