Add Simple Style To E-mail Sender

This commit is contained in:
Arkadiusz Jurga 2018-12-13 23:05:57 +01:00
parent 02c2d8b519
commit 446bd9988a
9 changed files with 721 additions and 35 deletions

View File

@ -1,5 +1,5 @@
body {
padding-top: 50px;
padding-top: 15rem;
padding-bottom: 20px;
}
@ -18,7 +18,346 @@
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
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;
}
}

View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
<Import Project="..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props" Condition="Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.1\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" />
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@ -234,7 +234,9 @@
<Content Include="Scripts\umd\popper-utils.min.js" />
<Content Include="Scripts\umd\popper.js" />
<Content Include="Scripts\umd\popper.min.js" />
<Content Include="Web.config" />
<Content Include="Web.config">
<SubType>Designer</SubType>
</Content>
<Content Include="Web.Debug.config">
<DependentUpon>Web.config</DependentUpon>
</Content>

View File

@ -9,7 +9,7 @@
<section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</configSections>
<connectionStrings>
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\ForumInzyneria.mdf;Initial Catalog=ForumInzyneria;Integrated Security=True" providerName="System.Data.SqlClient" />
<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\ForumInzyneria1.mdf;Initial Catalog=ForumInzyneria1;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />

View File

@ -1,5 +1,5 @@
body {
padding-top: 50px;
padding-top: 15rem;
padding-bottom: 20px;
}
@ -18,7 +18,351 @@
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
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;
}
.form-group--mailContent
{
width:35%;
}
.form-control--input
{
width: 30%;
}
@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;
}
}

View File

@ -51,6 +51,9 @@
<Reference Include="EntityFramework.SqlServer, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089, processorArchitecture=MSIL">
<HintPath>..\packages\EntityFramework.6.2.0\lib\net45\EntityFramework.SqlServer.dll</HintPath>
</Reference>
<Reference Include="Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
<HintPath>..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.0\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll</HintPath>
</Reference>
<Reference Include="Microsoft.CSharp" />
<Reference Include="Microsoft.Owin, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
<HintPath>..\packages\Microsoft.Owin.4.0.0\lib\net451\Microsoft.Owin.dll</HintPath>
@ -151,9 +154,6 @@
<Reference Include="Microsoft.AI.Web">
<HintPath>..\packages\Microsoft.ApplicationInsights.Web.2.5.1\lib\net45\Microsoft.AI.Web.dll</HintPath>
</Reference>
<Reference Include="Microsoft.CodeDom.Providers.DotNetCompilerPlatform">
<HintPath>..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.0\lib\net45\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll</HintPath>
</Reference>
</ItemGroup>
<ItemGroup>
<Compile Include="App_Start\BundleConfig.cs" />
@ -251,7 +251,7 @@
</ProjectExtensions>
<Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
<PropertyGroup>
<ErrorText>Ten projekt zawiera odwołania do pakietów NuGet, których nie ma na tym komputerze. Użyj przywracania pakietów NuGet, aby je pobrać. Aby uzyskać więcej informacji, zobacz http://go.microsoft.com/fwlink/?LinkID=322105. Brakujący plik: {0}.</ErrorText>
<ErrorText>This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them. For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}.</ErrorText>
</PropertyGroup>
<Error Condition="!Exists('..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.0\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.0\build\net46\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.props'))" />
</Target>

View File

@ -17,19 +17,20 @@ namespace MailSender.Models
//[ForeignKey]
//public int UserId //id usera ktory wyslal maila
[Display(Name = "Subject")]
[Display(Name = "Temat")]
[Required(AllowEmptyStrings = false)]
public string Subject { get; set; }
[DataType(DataType.EmailAddress)]
[Required(AllowEmptyStrings = false, ErrorMessage = "You need to type in an e-mail")]
[RegularExpression(".*@.*\\..*", ErrorMessage = "You typed in e-mail in wrong format")]
[Display(Name = "E-Mail to")]
[Display(Name = "Adres odbiorcy")]
public string EMailTo { get; set; }
[Display(Name ="Odpowiedź")]
[Required(AllowEmptyStrings = false, ErrorMessage = "You need to type in a message to send")]
[DataType(DataType.Text)]
[DataType(DataType.MultilineText)]
[StringLength(500, ErrorMessage = "Message has to have between 1 and 500 chars", MinimumLength = 1)]
public string Content { get; set; }
public string Content { get; set; }
}
}

View File

@ -1,8 +1,8 @@
@model MailSender.Models.MailModel
@{
ViewBag.Title = "Mail Sender";
//ViewBag.Title = "Mail Sender";
}
<h2>Send Mail</h2>
@if (ViewData.ContainsKey("mailErr"))
{
@ -13,23 +13,23 @@
{
<div class="form-group">
@Html.LabelFor(i => i.Subject, new { @class = "label-form" })
@Html.EditorFor(i => i.Subject, new { htmlAttributes = new { @class = "form-control", @placeholder = "Subject" } })
@Html.EditorFor(i => i.Subject, new { htmlAttributes = new { @class = "form-control form-control--input", @placeholder = "Temat" } })
@Html.ValidationMessageFor(i => i.Subject)
</div>
<div class="form-group">
@Html.LabelFor(i => i.EMailTo, new { @class = "label-form" })
@Html.EditorFor(i => i.EMailTo, new { htmlAttributes = new { @class = "form-control", @placeholder = "To" } })
@Html.EditorFor(i => i.EMailTo, new { htmlAttributes = new { @class = "form-control form-control--input", @placeholder = "Do" } })
@Html.ValidationMessageFor(i => i.EMailTo)
</div>
<div class="form-group">
<div class="form-group" >
@Html.LabelFor(i => i.Content, new { @class = "label-form" })
@Html.EditorFor(i => i.Content, new { htmlAttributes = new { @class = "form-control", @placeholder = "Body" } })
@Html.EditorFor(i => i.Content, new { htmlAttributes = new { @class = "form-control form-control--input", @placeholder = "Odpowiedź" } })
@Html.ValidationMessageFor(i => i.Content)
</div>
<input type="submit" value="Send" />
<input type="submit" value="Send" class="answer-list__add-btn" />
}
@section Scripts {

View File

@ -4,12 +4,12 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title — moja aplikacja platformy ASP.NET</title>
<title>Serwis Email</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</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,12 +17,12 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Nazwa aplikacji", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@Html.ActionLink("E-mail", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Strona główna", "Index", "Home")</li>
<li>@Html.ActionLink("Informacje", "About", "Home")</li>
<li>@Html.ActionLink("Strona Główna", "Index", "Home")</li>
<li>@Html.ActionLink("O mnie", "About", "Home")</li>
<li>@Html.ActionLink("Kontakt", "Contact", "Home")</li>
</ul>
</div>

View File

@ -66,12 +66,6 @@
</modules>
<validation validateIntegratedModeConfiguration="false" />
</system.webServer>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701" />
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
</compilers>
</system.codedom>
<entityFramework>
<defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
<parameters>
@ -82,4 +76,10 @@
<provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
</providers>
</entityFramework>
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701" />
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
</compilers>
</system.codedom>
</configuration>