aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/creative.css12
-rw-r--r--assets/css/style.css78
-rw-r--r--assets/images/misc/.DS_Storebin6148 -> 6148 bytes
-rw-r--r--user_profile_alt.html2
-rw-r--r--user_solutions.html95
5 files changed, 101 insertions, 86 deletions
diff --git a/assets/css/creative.css b/assets/css/creative.css
index 37936e3..76f1049 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -3,7 +3,7 @@
/*}*/
main .search {
width: 60%;
- height: 100%;
+ min-height: 100%;
}
.search-cover {
@@ -21,6 +21,16 @@ main .search {
padding-top: 10%;
padding-bottom: 10%;
}
+
+ main .search {
+ width: 80%;
+ }
+}
+
+@media only screen and (max-width: 485px) {
+ main .search {
+ width: 100%;
+ }
}
diff --git a/assets/css/style.css b/assets/css/style.css
index 660b021..d69653b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -48,9 +48,6 @@ main{
/* Changes - search is a flex container for h2 and bar, removed various attributes */
main .search {
- flex: 1;
- min-width: 60%;
- min-height: 100%;
background-color: rgba(235,235,235, 0.7);
overflow: auto;
@@ -131,79 +128,69 @@ main div {
background: none;
}
-main #solutions button#add-solution {
+main button#add-solution {
display: inline-block;
- border-radius: 10px;
background-color: #87B6A7;
color: white;
- width: 110px;
+}
+
+.top-sol {
+ margin-top: 20px;
+}
+.show-path{
+ margin-top: 10px;
}
-main p#show-path {
+main button#add-solution h3 {
+ margin: 0;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ font-size: 1em;
+}
+
+main p.show-path {
display: inline-block;
- margin-left: 30px;
color: #6f6f6f;
-
}
main #solutions {
padding-top: 2%;
text-align: left;
- width: 86%;
- height: 100%;
margin-left: 7%;
-
}
-
main [id^="sol-"] {
+ text-align: left;
color: #333;
margin-top: 30px;
margin-bottom: 30px;
- -moz-border-radius: 15px;
- border-radius: 15px;
- -moz-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
- -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ padding: 0;
}
main [id^="sol-"] .post-info {
- display: flex;
- justify-content: space-between;
+ display: flex;
+ justify-content: space-between;
background: #F79F79;
padding-top: 2%;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
padding-bottom: 5px;
-}
-
-main [id^="sol-"] .left{
- float: left;
- display: inline-block;
-}
-
-main [id^="sol-"] .right {
- float: right;
- display: inline-block;
+ width: 100%;
}
main [id^="sol-"] img.user-image {
- border-radius: 50%;
border: 2px solid darkgray;
margin-left: 25px;
}
-main [id^="sol-"] img.user-image, [id^="sol-"] p.username {
- display: inline-block;
+.upvoting, .downvoting, .upvote, .downvote, .user-image, .username {
+ display: inline-block;
}
main [id^="sol-"] p.username {
- vertical-align: top;
-}
-
-main [id^="sol-"] p.num-upvotes, [id^="sol-"] p.num-downvotes, [id^="sol-"] button {
- display: inline-block;
+ vertical-align: middle;
}
main [id^="sol-"] button.upvote, [id^="sol-"] button.downvote {
@@ -221,7 +208,7 @@ main [id^="sol-"] button.upvote img, [id^="sol-"] button.downvote img {
}
main [id^="sol-"] p.num-downvotes, [id^="sol-"] p.num-upvotes {
- vertical-align: top;
+ vertical-align: bottom;
}
@@ -234,6 +221,7 @@ main [id^="sol-"] p.num-downvotes {
}
main [id^="sol-"] div.user-sol h3 {
+ font-size: 1.17em;
background-color: #f0e9e1;
padding: 10px;
padding-left: 20px;
@@ -252,18 +240,15 @@ main [id^="sol-"] div.user-sol p img {
height: auto;
}
-main [id^="sol-"] div.comments { /* BORDER RADIUS ISN'T WORKING - sad :( */
+main [id^="sol-"] div.comments {
background-color: #f0e9e1;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
padding: 10px;
}
-main [id^="sol-"] div.comments:hover {
-
-}
-
main [id^="sol-"] div.comments h3 {
+ font-size: 1.17em;
padding: 10px;
padding-left: 20px;
margin-top: 0;
@@ -271,7 +256,6 @@ main [id^="sol-"] div.comments h3 {
}
main [id^="sol-"] div.comments ul li img {
- border-radius: 50%;
width: 40px;
vertical-align: top;
}
@@ -288,6 +272,10 @@ main [id^="sol-"] div.comments ul li {
margin-bottom: 15px;
}
+.comments ul {
+
+}
+
main [id^="sol-"] div.comments ul li p.comment-username {
margin-bottom: 0;
margin-top: 5px;
diff --git a/assets/images/misc/.DS_Store b/assets/images/misc/.DS_Store
index 9193f91..b5903aa 100644
--- a/assets/images/misc/.DS_Store
+++ b/assets/images/misc/.DS_Store
Binary files differ
diff --git a/user_profile_alt.html b/user_profile_alt.html
index dee5962..4abfc2b 100644
--- a/user_profile_alt.html
+++ b/user_profile_alt.html
@@ -25,7 +25,7 @@
</head>
<body>
- <nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
+<nav id="mainNav" class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
diff --git a/user_solutions.html b/user_solutions.html
index 2f1d14e..c546ec1 100644
--- a/user_solutions.html
+++ b/user_solutions.html
@@ -7,9 +7,12 @@
<!--ORDER IS IMPORTANT DO NOT SHIFT-->
+ <link href="assets/css/style.css" rel="stylesheet" type="text/css">
+
<!--Custom CSS Files-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
+
<!--Bootstrap File-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/creative.css">
@@ -75,22 +78,29 @@
<!--made the id in to a class-->
<div class='search solutions-container container'>
- <div id="solutions">
- <button id="add-solution"><h3>Add a solution</h3></button>
- <p id="show-path">CSC148 > Winter 2015 > Question 1</p>
+ <div>
+ <div class="row top-sol">
+ <button class="col-xs-4 col-sm-2 col-md-2 col-lg-2 col-xs-offset-4 col-sm-offset-5 col-md-offset-2 col-lg-offset-2 rounded" id="add-solution"><h3>Add a solution</h3></button>
+ <p class="col-xs-12 col-sm-12 col-md-6 show-path">CSC148 > Winter 2015 > Question 1</p>
+ </div>
- <section id="sol-1">
+ <div class="row">
+ <section id="sol-1" class="col-md-10 col-md-offset-1 rounded">
<div class="post-info">
- <div class="left">
- <img class="user-image" src="assets/images/misc/user1.jpeg">
+ <div class="">
+ <img class="img-responsive img-circle user-image" src="assets/images/misc/user1.jpeg">
<p class="username">jSmith123</p>
</div>
- <div class="right">
- <button class="upvote"><img src="assets/images/up_arrow.png"></button>
- <p class="num-upvotes">3</p>
- <button class="downvote"><img src="assets/images/down_arrow.png"></button>
- <p class="num-downvotes">-1</p>
+ <div class="pull-right">
+ <div class="upvoting">
+ <button class="upvote"><img src="assets/images/up_arrow.png"></button>
+ <p class="upvote num-upvotes">3</p>
+ </div>
+ <div class="downvoting">
+ <button class="downvote"><img src="assets/images/down_arrow.png"></button>
+ <p class=" downvote num-downvotes">-1</p>
+ </div>
</div>
</div>
@@ -100,45 +110,53 @@
</div>
<div class="comments">
- <h3><span>3</span> comments</h3>
+ <h3><a data-toggle="collapse" href="#com1"><span>3</span> comments <span class="caret"></span></a></h3>
- <ul>
- <li>
- <img src="assets/images/misc/user3.jpeg" class="comment-user-img">
+ <div id="com1" class="panel-collapse collapse">
+ <ul class="list-group">
+ <li class="list-group-item">
+ <img src="assets/images/misc/user3.jpeg" class="img-responsive img-circle comment-user-img">
<p class="comment-username">janeDoe456</p>
<p class="user-comment"> This is a good answer!</p>
</li>
- <li>
- <img src="assets/images/misc/user2.jpeg" class="comment-user-img">
+ <li class="list-group-item">
+ <img src="assets/images/misc/user2.jpeg" class="img-responsive img-circle comment-user-img">
<p class="comment-username">BenAfleckIsAnOkActor</p>
<p class="user-comment">Ben Affleck is indeed just an ok actor.</p>
</li>
- <li>
- <img src="assets/images/misc/user6.jpeg" class="comment-user-img">
+ <li class="list-group-item">
+ <img src="assets/images/misc/user6.jpeg" class="img-responsive img-circle comment-user-img">
<p class="comment-username">morgana254</p>
<p class="user-comment">I mean, he's no Casey Affleck.</p>
</li>
</ul>
+ </div>
</div>
</section>
+ </div>
- <section id="sol-2">
+ <div class="row">
+ <section id="sol-1" class="col-md-10 col-md-offset-1 rounded">
<div class="post-info">
- <div class="left">
- <img class="user-image" src="assets/images/misc/user3.jpeg">
+ <div class="">
+ <img class="img-responsive img-circle user-image" src="assets/images/misc/user3.jpeg">
<p class="username">janeDoe456</p>
</div>
- <div class="right">
- <button class="upvote"><img src="assets/images/up_arrow.png"></button>
- <p class="num-upvotes">4</p>
- <button class="downvote"><img src="assets/images/down_arrow.png"></button>
- <p class="num-downvotes">-8</p>
+ <div class="pull-right">
+ <div class="upvoting">
+ <button class="upvote"><img src="assets/images/up_arrow.png"></button>
+ <p class="upvote num-upvotes">4</p>
+ </div>
+ <div class="downvoting">
+ <button class="downvote"><img src="assets/images/down_arrow.png"></button>
+ <p class=" downvote num-downvotes">-8</p>
+ </div>
</div>
</div>
@@ -148,29 +166,28 @@
</div>
<div class="comments">
- <h3><span>2</span> comments</h3>
- <ul>
- <li>
- <img src="assets/images/misc/user5.jpeg" class="comment-user-img">
+ <h3><a data-toggle="collapse" data-target="#com2" href="#com2" aria-expanded="true"><span>2</span> comments <span class="caret"></span></a></h3>
+
+ <div id="com2" class="panel-collapse collapse">
+ <ul class="list-group">
+ <li class="list-group-item">
+ <img src="assets/images/misc/user5.jpeg" class="img-responsive img-circle comment-user-img">
<p class="comment-username">catherineTheGreat</p>
<p class="user-comment"> As a Portuguese, this was offensive and hilarious.</p>
</li>
- <li>
- <img src="assets/images/user-default.png" class="comment-user-img">
+ <li class="list-group-item">
+ <img src="assets/images/user-default.png" class="img-responsive img-circle comment-user-img">
<p class="comment-username">alexStrav748</p>
<p class="user-comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
-
-
-
</ul>
-
+ </div>
</div>
- </section>
-
+ </section>
+ </div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-02 09:43:36 +0000