Merge remote-tracking branch 'remotes/origin/Styling-home-views'
This commit is contained in:
Bartosz Chyzy
commit
8e90b463ae
@ -1,24 +1,374 @@
|
||||
body {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Set padding to keep content from hitting the edges */
|
||||
.body-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Override the default bootstrap behavior where horizontal description lists
|
||||
will truncate terms that are too long to fit in the left column
|
||||
*/
|
||||
.dl-horizontal dt {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Set width on the form input elements since they're 100% wide by default */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
max-width: 280px;
|
||||
}
|
||||
body {
|
||||
padding-top: 15rem;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Set padding to keep content from hitting the edges */
|
||||
.body-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Override the default bootstrap behavior where horizontal description lists
|
||||
will truncate terms that are too long to fit in the left column
|
||||
*/
|
||||
.dl-horizontal dt {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* Set width on the form input elements since they're 100% wide by default */
|
||||
input,
|
||||
select
|
||||
{
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: linear-gradient(#47478f 15%,#4d4794);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
background: #b7c5d8;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.navbar-brand{
|
||||
font-size:2.5rem;
|
||||
font-weight:700;
|
||||
height:70px;
|
||||
line-height:4rem;
|
||||
}
|
||||
|
||||
.navbar-toggle{
|
||||
margin-top:18px;
|
||||
}
|
||||
|
||||
.navbar > .container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.nav > li > a:hover, .nav > li > a:focus{
|
||||
|
||||
background-color:#5a5aa7 ;
|
||||
}
|
||||
|
||||
|
||||
.category-list-wrapper{
|
||||
width:80%;
|
||||
margin:0 auto;
|
||||
|
||||
}
|
||||
|
||||
.category-wrapper > ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.category-list{
|
||||
display: grid;
|
||||
padding:0;
|
||||
grid-row-gap: 2rem;
|
||||
}
|
||||
|
||||
.category-list > li {
|
||||
height: 9rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color:#bbbbc5;
|
||||
border-radius: 1rem;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.category-list > li > a {
|
||||
text-decoration: none;
|
||||
color: #fafafa;
|
||||
font-size: 3rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
line-height: 9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.single-category-wrapper{
|
||||
padding: 3rem;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.single-category-wrapper > h2 {
|
||||
margin:1rem 0;
|
||||
}
|
||||
|
||||
.single-category-wrapper > ul {
|
||||
padding:0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.single-category-wrapper > ul li {
|
||||
padding: 1.5rem 0;
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.single-category-wrapper > ul li a {
|
||||
text-decoration: none;
|
||||
color: #3b3b3b;
|
||||
|
||||
}
|
||||
|
||||
.add-topic {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #79bd9b;
|
||||
padding: 10px;
|
||||
border-radius: 1rem;
|
||||
font-size: 1.8rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.add-topic > a{
|
||||
color: #fafafa;
|
||||
text-decoration: none;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
|
||||
.form-AddQuestion {
|
||||
background-color: #f1f1f3;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.form-AddQuestion input {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.form-personal-data{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:100%;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.form-personal-data .form-group {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.form-AddQuestion input[type=submit], .add-answer input[type=submit] {
|
||||
border: none;
|
||||
background: #79bd9b;
|
||||
padding: 10px;
|
||||
border-radius: 1rem;
|
||||
font-size: 1.8rem;
|
||||
color: #fafafa;
|
||||
|
||||
}
|
||||
|
||||
.form-AddQuestion input[type=submit]{
|
||||
margin-top: 1.7rem;
|
||||
}
|
||||
|
||||
.form-AddQuestion__btn{
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
width: 50%;
|
||||
margin: 20px auto;
|
||||
padding: 5px; /*workaround for textarea margin*/
|
||||
background: #FFF;
|
||||
border: 1px solid #808080;
|
||||
}
|
||||
|
||||
textarea {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.answer-list__question {
|
||||
background: #dee0eb;
|
||||
padding: 3rem;
|
||||
overflow-wrap: break-word;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.answer-list__question h2 {
|
||||
margin:0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.answer-list__info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.answer-list__answer {
|
||||
list-style: none;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.answer-list__answer__info {
|
||||
background: #4d4c4c;
|
||||
color: #fafafa;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.answer-list__answer__info--proffesional {
|
||||
background: #c68585;
|
||||
}
|
||||
|
||||
.answer-list__single-answer {
|
||||
border: 1px solid #c0bebe;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.answer-list__content {
|
||||
padding: 2rem 2rem;
|
||||
width: 100%;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.answer-list__heading {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.answer-list__add-btn {
|
||||
border: none;
|
||||
background: #79bd9b;
|
||||
border-radius: 1rem;
|
||||
font-size: 1.8rem;
|
||||
color: #fafafa;
|
||||
width: 20rem;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
height: 5rem;
|
||||
|
||||
}
|
||||
|
||||
.answer-list__add-btn a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 5rem;
|
||||
}
|
||||
|
||||
.add-answer {
|
||||
background: #f2f2f2;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
|
||||
|
||||
.navbar > .container {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav > li {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar-nav > li > a {
|
||||
height: 100%;
|
||||
border-radius: 0.8rem;
|
||||
}
|
||||
|
||||
.nav > li > a:hover, .nav > li > a:focus {
|
||||
transition: background-color .1s ease;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 2rem;
|
||||
}
|
||||
|
||||
.single-category-wrapper {
|
||||
width: 65%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-AddQuestion__btn {
|
||||
flex-direction: row;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.form-personal-data{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.form-personal-data .form-group {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.form-AddQuestion input[type=submit] {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -3,24 +3,34 @@
|
||||
ViewBag.Title = "AddAnswer";
|
||||
}
|
||||
|
||||
<h2>AddAnswer</h2>
|
||||
|
||||
<div class="add-answer">
|
||||
|
||||
<h2>Dodaj odpowiedź</h2>
|
||||
|
||||
<hr style="border-top: 1px solid #d3d3d3; margin-bottom: 3rem;" />
|
||||
|
||||
|
||||
@using (Html.BeginForm("AddAnswer", "Home", FormMethod.Post))
|
||||
{
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Nick, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Nick, new { htmlAttributes = new { @class = "form-control" } })
|
||||
</div>
|
||||
@Html.EditorFor(model => model.Nick, new { htmlAttributes = new { @class = "form-control", placeholder="Nazwa użytkownika" } })
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
@Html.TextAreaFor(model => model.Content, new { @class = "form-control", @id = "exampleFormControlTextarea3", rows = 7, placeholder = "Odpowiedź" })<br />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Content, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Content, new { htmlAttributes = new { @class = "form-control" } })
|
||||
</div>
|
||||
|
||||
@Html.HiddenFor(model=>model.QuestionId)
|
||||
|
||||
<input type="submit" value="Zgłoś" />
|
||||
<input type="submit" value="Zgłoś odpowiedź" />
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@ -3,36 +3,47 @@
|
||||
ViewBag.Title = "AddQuestion";
|
||||
}
|
||||
|
||||
<h2>AddQuestion</h2>
|
||||
|
||||
|
||||
|
||||
@using (Html.BeginForm("AddQuestion", "Home", FormMethod.Post))
|
||||
{
|
||||
|
||||
|
||||
<div class="form-AddQuestion">
|
||||
<h2>Dodaj zapytanie</h2>
|
||||
<hr style="border-top: 1px solid #d3d3d3; margin-bottom:3rem;" />
|
||||
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control", placeholder="Temat" } })
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
|
||||
@Html.TextAreaFor(model => model.Content, new { @class="form-control", @id = "exampleFormControlTextarea3", rows=7, placeholder="Treść zapytania" })<br />
|
||||
|
||||
</div>
|
||||
<div class="form-personal-data">
|
||||
<div class="form-group">
|
||||
@Html.EditorFor(model => model.Nick, new { htmlAttributes = new { @class = "form-control", placeholder="Nazwa użytkownika" } })
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", placeholder="Adres email" } })
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-AddQuestion__btn">
|
||||
|
||||
|
||||
@Html.DropDownListFor(x=>x.CategoryId,new SelectList(Model.Categories,"Id", "CategoryName"), new { @class = "form-control" })
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Title, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
|
||||
<input type="submit" value="Dodaj zapytanie"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Content, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Content, new { htmlAttributes = new { @class = "form-control" } })
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Nick, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Nick, new { htmlAttributes = new { @class = "form-control" } })
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
@Html.LabelFor(model => model.Email, new { @class = "label-form" })
|
||||
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
|
||||
</div>
|
||||
|
||||
@Html.DropDownListFor(x=>x.CategoryId,new SelectList(Model.Categories,"Id", "CategoryName"))
|
||||
|
||||
<input type="submit" value="Zgłoś"/>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,18 +1,36 @@
|
||||
@model Forum.DataAccessLayer.Models.Category
|
||||
|
||||
@{
|
||||
ViewBag.Title = Model.CategoryName;
|
||||
}
|
||||
|
||||
<h2>@Model.CategoryName</h2>
|
||||
|
||||
@Html.ActionLink("Dodaj pytanie", "AddQuestion", "Home",new {category=Model.CategoryName},null)
|
||||
|
||||
<ul>
|
||||
@{
|
||||
foreach (var question in Model.Questions)
|
||||
{
|
||||
<li>@Html.ActionLink(question.Title,"Question","Home",new{id=question.Id},null)</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
@model Forum.DataAccessLayer.Models.Category
|
||||
|
||||
@{
|
||||
ViewBag.Title = Model.CategoryName;
|
||||
}
|
||||
|
||||
|
||||
<div class="single-category-wrapper">
|
||||
|
||||
<h2>@Model.CategoryName</h2>
|
||||
|
||||
<hr style="border-top: 1px solid #d3d3d3" />
|
||||
|
||||
<ul class="single-category__topic">
|
||||
@{
|
||||
foreach (var question in Model.Questions)
|
||||
{
|
||||
string title = question.Title;
|
||||
if (String.IsNullOrEmpty(title))
|
||||
{
|
||||
title = "Brak tytułu pytania";
|
||||
}
|
||||
|
||||
<li>@Html.ActionLink(title, "Question", "Home", new { id = question.Id }, null)</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
|
||||
<button class="add-topic">
|
||||
|
||||
@Html.ActionLink("Dodaj zapytanie", "AddQuestion", "Home", new { category = Model.CategoryName }, null)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
@model IEnumerable<Forum.DataAccessLayer.Models.Category>
|
||||
|
||||
@{
|
||||
ViewBag.Title = "Strona Główna";
|
||||
}
|
||||
|
||||
<ul>
|
||||
|
||||
@{
|
||||
foreach (var category in Model)
|
||||
{
|
||||
<li>
|
||||
@Html.ActionLink(category.CategoryName,"Category","Home",new{name=category.CategoryName},null)
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
|
||||
@model IEnumerable<Forum.DataAccessLayer.Models.Category>
|
||||
|
||||
@{
|
||||
ViewBag.Title = "Strona Główna";
|
||||
}
|
||||
<div class="category-list-wrapper">
|
||||
<ul class="category-list">
|
||||
|
||||
@{
|
||||
foreach (var category in Model)
|
||||
{
|
||||
<li>
|
||||
@Html.ActionLink(category.CategoryName, "Category", "Home", new { name = category.CategoryName }, null)
|
||||
</li>
|
||||
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -4,25 +4,46 @@
|
||||
ViewBag.Title = @Model.Title;
|
||||
}
|
||||
|
||||
|
||||
<div class="answer-list__question">
|
||||
|
||||
|
||||
<div class="answer-list__info">
|
||||
<h2>@Model.Title</h2>
|
||||
@Model.PostDate
|
||||
|
||||
<h2>@Model.Title</h2>
|
||||
</div>
|
||||
<hr style="border-top: 1px solid #d3d3d3" />
|
||||
|
||||
<div>
|
||||
|
||||
<div class="answer-list__question__content">
|
||||
@Model.Content
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
@Html.ActionLink("Dodaj odpowiedź","AddAnswer",new{id=@Model.Id})
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<b>Odpowiedzi</b>
|
||||
<ul>
|
||||
|
||||
<h3 class="answer-list__heading">Odpowiedzi</h3>
|
||||
<ul class="answer-list__answer">
|
||||
@{
|
||||
foreach (var answer in Model.Answers)
|
||||
{
|
||||
<li>@answer.Nick @answer.Date @answer.Content </li>
|
||||
<li class="answer-list__single-answer">
|
||||
<div class="answer-list__answer__info">
|
||||
<span class="username">@answer.Nick napisał(a)</span>
|
||||
@answer.Date
|
||||
</div>
|
||||
<div class="answer-list__content">
|
||||
@answer.Content
|
||||
</div>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div class="answer-list__add-btn">
|
||||
|
||||
@Html.ActionLink("Dodaj odpowiedź", "AddAnswer", new { id = @Model.Id })
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
@ -17,7 +17,7 @@
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
|
||||
@Html.ActionLink("FORUM", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user