Merge remote-tracking branch 'remotes/origin/Styling-home-views'

Trunk/Server/Forum/Forum/Content/Site.css

@@ -1,24 +1,374 @@
-body {
+body {
-    padding-top: 50px;
+    padding-top: 15rem;
-    padding-bottom: 20px;
+    padding-bottom: 20px;
-}
+}
-
+
-/* Set padding to keep content from hitting the edges */
+/* Set padding to keep content from hitting the edges */
-.body-content {
+.body-content {
-    padding-left: 15px;
+    padding-left: 15px;
-    padding-right: 15px;
+    padding-right: 15px;
-}
+}
-
+
-/* Override the default bootstrap behavior where horizontal description lists 
+/* Override the default bootstrap behavior where horizontal description lists 
-   will truncate terms that are too long to fit in the left column 
+   will truncate terms that are too long to fit in the left column 
-*/
+*/
-.dl-horizontal dt {
+.dl-horizontal dt {
-    white-space: normal;
+    white-space: normal;
-}
+}
-
+
-/* Set width on the form input elements since they're 100% wide by default */
+/* Set width on the form input elements since they're 100% wide by default */
-input,
+input,
-select,
+select
-textarea {
+ {
-    max-width: 280px;
+    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;
+    }
+
+}
+
+
+

Trunk/Server/Forum/Forum/Views/Home/AddAnswer.cshtml

@@ -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", placeholder="Nazwa użytkownika" } })
-        @Html.EditorFor(model => model.Nick, new { htmlAttributes = new { @class = "form-control" } })
+    </div>
-    </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>

Trunk/Server/Forum/Forum/Views/Home/AddQuestion.cshtml

@@ -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" })
     
-
+            <input type="submit" value="Dodaj zapytanie"/>
-    <div class="form-group">
+        </div>
-        @Html.LabelFor(model => model.Title, new { @class = "label-form" })
-        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
     </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ś"/>
 }
 
 

Trunk/Server/Forum/Forum/Views/Home/Category.cshtml

@@ -1,18 +1,36 @@
-@model Forum.DataAccessLayer.Models.Category
+@model Forum.DataAccessLayer.Models.Category
-
+
-@{
+@{
-    ViewBag.Title = Model.CategoryName;   
+    ViewBag.Title = Model.CategoryName;   
-}
+}
-
+
-<h2>@Model.CategoryName</h2>
+
-
+<div class="single-category-wrapper">
-@Html.ActionLink("Dodaj pytanie", "AddQuestion", "Home",new {category=Model.CategoryName},null)
+
-
+<h2>@Model.CategoryName</h2>
-<ul>
+
-    @{
+<hr style="border-top: 1px solid #d3d3d3" />
-        foreach (var question in Model.Questions)
+
-        {
+<ul class="single-category__topic">
-            <li>@Html.ActionLink(question.Title,"Question","Home",new{id=question.Id},null)</li>
+    @{
-        }
+        foreach (var question in Model.Questions)
-    }
+        {
-</ul>
+            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>
+
+
+

Trunk/Server/Forum/Forum/Views/Home/Index.cshtml

@@ -1,18 +1,19 @@
-@model IEnumerable<Forum.DataAccessLayer.Models.Category>
+@model IEnumerable<Forum.DataAccessLayer.Models.Category>
-
+
-@{
+@{
-    ViewBag.Title = "Strona Główna";    
+    ViewBag.Title   = "Strona Główna";    
-}
+}
-
+<div class="category-list-wrapper">
-<ul>
+<ul class="category-list">
-
+
-    @{
+   @{
-        foreach (var category in Model)
+       foreach (var category in Model)
-        {
+       {
-            <li>
+        <li>
-                @Html.ActionLink(category.CategoryName,"Category","Home",new{name=category.CategoryName},null)
+            @Html.ActionLink(category.CategoryName, "Category", "Home", new { name = category.CategoryName }, null)
-            </li>
+        </li>
-        }
+       
-    }
+       }
-</ul>
+}
-
+</ul>
+</div>

Trunk/Server/Forum/Forum/Views/Home/Question.cshtml

@@ -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/>
+    </div>
-@Html.ActionLink("Dodaj odpowiedź","AddAnswer",new{id=@Model.Id})
-<hr/>
 
-<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>
+

Trunk/Server/Forum/Forum/Views/Shared/_Layout.cshtml

@@ -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">