maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust profile styling and widget style updates (#312)

Browse source 
* Modify profile design

* Make profile design adjustments

* Minor profile adjustments

* Adjust padding on profile box
This commit is contained in:
Ben Halpern 2018-05-14 16:42:31 -04:00 • committed by GitHub
parent b4292ade33
commit 576132179d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 668 additions and 404 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/images/external-link-logo.svg Normal file
View file

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="511.626px" height="511.627px" viewBox="0 0 511.626 511.627" style="enable-background:new 0 0 511.626 511.627;"
xml:space="preserve">
<g>
<g>
<path d="M392.857,292.354h-18.274c-2.669,0-4.859,0.855-6.563,2.573c-1.718,1.708-2.573,3.897-2.573,6.563v91.361
c0,12.563-4.47,23.315-13.415,32.262c-8.945,8.945-19.701,13.414-32.264,13.414H82.224c-12.562,0-23.317-4.469-32.264-13.414
c-8.945-8.946-13.417-19.698-13.417-32.262V155.31c0-12.562,4.471-23.313,13.417-32.259c8.947-8.947,19.702-13.418,32.264-13.418
h200.994c2.669,0,4.859-0.859,6.57-2.57c1.711-1.713,2.566-3.9,2.566-6.567V82.221c0-2.662-0.855-4.853-2.566-6.563
c-1.711-1.713-3.901-2.568-6.57-2.568H82.224c-22.648,0-42.016,8.042-58.102,24.125C8.042,113.297,0,132.665,0,155.313v237.542
c0,22.647,8.042,42.018,24.123,58.095c16.086,16.084,35.454,24.13,58.102,24.13h237.543c22.647,0,42.017-8.046,58.101-24.13
c16.085-16.077,24.127-35.447,24.127-58.095v-91.358c0-2.669-0.856-4.859-2.574-6.57
C397.709,293.209,395.519,292.354,392.857,292.354z"/>
<path d="M506.199,41.971c-3.617-3.617-7.905-5.424-12.85-5.424H347.171c-4.948,0-9.233,1.807-12.847,5.424
c-3.617,3.615-5.428,7.898-5.428,12.847s1.811,9.233,5.428,12.85l50.247,50.248L198.424,304.067
c-1.906,1.903-2.856,4.093-2.856,6.563c0,2.479,0.953,4.668,2.856,6.571l32.548,32.544c1.903,1.903,4.093,2.852,6.567,2.852
s4.665-0.948,6.567-2.852l186.148-186.148l50.251,50.248c3.614,3.617,7.898,5.426,12.847,5.426s9.233-1.809,12.851-5.426
c3.617-3.616,5.424-7.898,5.424-12.847V54.818C511.626,49.866,509.813,45.586,506.199,41.971z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

7
app/assets/stylesheets/article-show.scss
View file

@ -75,16 +75,15 @@ header{
width:880px;
max-width:100%;
background:white;
box-shadow: $shadow;
margin:60px auto 20px;
margin:68px auto 20px;
text-align: left;
border: 1px solid darken($light-medium-gray, 2%);
box-shadow: 3px 4px 0px darken($light-medium-gray, 2%);
box-shadow: $bold-shadow;
@media screen and ( min-width: 950px ){
border-radius: 3px;
}
@media screen and ( min-width: 1250px ){
margin-top:80px;
margin-top:72px;
}
&.article{
position:relative;

105
app/assets/stylesheets/articles.scss
View file

@ -11,10 +11,10 @@
max-width:1250px;
text-align: left;
@media screen and ( min-width: 950px ){
margin-top:22px;
margin-top:26px;
}
&.sub-home{
margin-top:39px;
margin-top:10px;
.side-bar{
@media screen and ( min-width: 950px ){
margin-top:12px;
@ -25,9 +25,9 @@
padding:40px 0px;
font-size:1.2em;
background: white;
box-shadow: $shadow;
box-shadow: $bold-shadow;
border-radius:3px;
border:1px solid #e6e6e5;
border:1px solid $outline-color;;
width:94%;
margin:auto;
margin-top:12px;
@ -67,7 +67,7 @@
float:left;
}
.on-page-nav-controls{
height:55px;
height:45px;
position:relative;
opacity:0.85;
.on-page-nav-butt{
@ -127,9 +127,12 @@
display: inline-block;
padding: 2px 8px;
font-size:0.95em;
border-radius: 2px;
border: 1px solid transparent;
&.selected{
background: $purple;
box-shadow: 3px 4px 0px darken($purple, 6%);
border: 1px solid $dark-purple;
box-shadow: 3px 4px 0px $dark-purple;
}
&:hover{
opacity:1;
@ -158,7 +161,8 @@
text-align:left;
background:$white;
transition: opacity .35s ease-in;
box-shadow: $shadow;
border: 1px solid $outline-color;
box-shadow: $bold-shadow;
border-radius:3px;
width:94%;
margin:auto;
@ -166,9 +170,6 @@
@media screen and ( min-width: 950px ){
width:100%;
}
&:hover{
background:$lightest-gray;
}
&.active{
opacity:0.66;
}
@ -347,7 +348,7 @@
h3{
margin:15px auto;
font-size:32px;
font-weight:400;
font-weight:500;
width:94%;
margin-top:-14px;
padding-top:20px;
@ -362,7 +363,13 @@
}
&.big-article {
padding:0px;
margin:auto;
margin:10px auto 0px;
@media screen and ( min-width: 650px ){
margin:15px auto 0px;
}
@media screen and ( min-width: 950px ){
margin:10px auto 0px;
}
.picture{
width:100%;
margin:auto;
@ -387,7 +394,7 @@
border-radius:3px;
h3{
font-size:calc(1.7vw + 22px);
font-weight:400;
font-weight:500;
width:calc(100% - 20px);
margin-left:12px;
margin-bottom:8px;
@ -404,11 +411,6 @@
padding-bottom:120px;
}
}
&:hover{
.content-wrapper{
background:$light-gray !important;
}
}
}
}
.featured-profile-button{
@ -603,7 +605,7 @@
@media screen and ( max-width: 949px ){
.sidebar-wrapper{
position:fixed;
top:40px;
top:48px;
left:0;
bottom:0;
z-index:100;
@ -696,7 +698,8 @@
margin-bottom:14px;
border-radius:3px;
width: calc(100% - 3px);
box-shadow: $shadow;
border: 1px solid $outline-color;
box-shadow: $bold-shadow;
// background:red;
.sidebar-profile-snapshot-inner{
display:inline-block;
@ -751,10 +754,8 @@
}
.sidebar-nav-header{
padding:15px 10px;
font-size: 1.3em;
font-family: $helvetica-condensed;
font-stretch:condensed;
font-weight: 800;
font-size: 0.9em;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
&.sidebar-nav-header-middle{
padding-top:10px;
}
@ -876,19 +877,19 @@
display:block;
color: $black;
border-radius:3px;
box-shadow: $shadow;
border: 1px solid $outline-color;
box-shadow: $bold-shadow;
&:hover{
opacity:1;
}
&.signin-cta-widget{
background: $yellow;
background: lighten($purple, 3%);
border: 1px solid darken($bold-blue, 5%);
box-shadow: 5px 6px 0px darken($bold-blue, 15%);
}
&.sponsorship-widget{
display: none;
text-align:center;
header{
font-size:1.1em;
}
}
&.showing{
display: block;
@ -943,10 +944,8 @@
width:100%;
margin:auto;
font-weight:800;
font-size: 1.2em;
padding-bottom:10px;
font-family: $helvetica-condensed;
font-stretch:condensed;
font-size: 0.9em;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
a{
color: $black;
&:hover{
@ -954,10 +953,9 @@
}
}
.emoji{
margin-right:3px;
margin-left:5px;
margin-right:6px;
display:inline-block;
vertical-align:-2px;
vertical-align:-4px;
img{
width:18px;
border:0px;
@ -967,6 +965,9 @@
}
.widget-body{
margin-top:9px;
font-size:0.9em;
line-height: 1.2em;
padding-bottom:5px;
&.body-scrollable{
height: calc(100vh - 300px);
max-height: 500px;
@ -1050,7 +1051,7 @@
.widget-footer{
color:$medium-gray;
font-size:0.9em;
padding:5px 0px;
padding:5px 0px 0px;
img{
height: 15px;
width: 15px;
@ -1144,18 +1145,19 @@
}
.cta-button{
margin-top:8px;
padding:17px 5px 8px;
margin-left: 3px;
padding:8px 0px;
font-size:0.93em;
color: $sky-blue;
background: white;
display:block;
width:92%;
border-top: 3px solid $light-gray;
text-align: left;
&.login-cta-button{
padding:10px 5px;
border-top:0px;
color: $black;
font-size:1.2em;
width:100%;
background: lighten($purple, 3%);
}
&:hover{
text-decoration: underline;
@ -1175,7 +1177,7 @@
// background:red;
}
.discuss-list-comment-count{
font-size: 0.7em;
font-size: 0.8em;
color: $medium-gray;
margin-top: 2px;
img {
@ -1186,7 +1188,7 @@
&.discuss-list-comment-count-brand-new {
background:$yellow;
color:$black;
font-size:1.1em;
font-size:1.2em;
}
}
&::before {
@ -1246,6 +1248,9 @@
}
.feed-cta {
background: lighten($purple, 3%) !important;
border: 1px solid darken($bold-blue, 5%) !important;
box-shadow: 5px 6px 0px darken($bold-blue, 15%) !important;
.cta-container {
padding: calc(1vw + 7px) 9px;
margin-bottom: 15px;
@ -1254,20 +1259,22 @@
text-align: center;
margin-right: 9px;
padding-right: 9px;
background-color: rgb(251, 253, 139);
font-size: 1.2em;
font-size: 1.3em;
}
.button-container {
margin-top:40px;
text-align: center;
margin-right: 9px;
padding-right: 9px;
}
.cta-button {
text-align: center;
margin: 10px;
width:100px;
padding: 3px 10px;
margin: 5px;
width:95px;
padding: 3px 8px;
font-size:1.15em;
display: inline-block;
height: auto;
text-align:center;
font-weight:bold;
@ -1279,7 +1286,7 @@
.narrow-nav-menu{
position:absolute;
top:40px;
top:48px;
left: 0;
right:0;
background: white;

20
app/assets/stylesheets/index-comments.scss
View file

@ -5,8 +5,8 @@
padding-bottom:calc(0.6vw + 5px);
background:white;
border-radius:3px;
border:1px solid #e6e6e5;
box-shadow: $shadow;
border:1px solid $outline-color;
box-shadow: $bold-shadow;
margin:auto;
margin-top:8px;
width:94%;
@ -27,19 +27,13 @@
font-size:0.85em;
}
}
h2{
.emoji-img{
height: 21px;
width: 22px;
}
padding:calc(0.5vw + 3px) 0px;
padding-left:13px;
header{
padding:calc(1vw + 3px) 13px 0.5vw;
margin:0;
font-size:21px;
font-family: $helvetica-condensed;
font-stretch:condensed;
font-size:17px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@media screen and ( min-width: 430px ){
font-size:29px;
font-size:19px;
}
}
a{

2
app/assets/stylesheets/scaffolds.scss
View file

@ -24,7 +24,7 @@ body {
min-height:88vh;
visibility: visible;
&.stories-index,&.notifications-index,&.stories-search,&.podcast_episodes-index,&.reading_list_items-index,.tags-index{
margin-top:60px;
margin-top:68px;
}
}

6
app/assets/stylesheets/sticky-nav.scss
View file

@ -6,7 +6,7 @@
display: block;
position: fixed;
left: calc(50% + 298px);
top: 84px;
top: 80px;
bottom: 20px;
width: 310px;
display: flex;
@ -75,8 +75,8 @@
background: white;
margin-bottom: 10px;
margin-left: 10px;
border: 1px solid darken($light-medium-gray, 13%);
box-shadow: 3px 4px 0px darken($light-medium-gray, 13%);
border: 1px solid $outline-color;
box-shadow: $bold-shadow;
color: $black;
width: 262px;
border-radius: 3px;

30
app/assets/stylesheets/top-bar.scss
View file

@ -16,9 +16,10 @@
-webkit-backface-visibility: hidden;
z-index:1000;
font-size:17px;
height:40px;
height:48px;
background:$tan;
position:fixed;
border-bottom: 1px solid rgba(0, 0, 0, 0.33);
box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.13);
nav{
max-width:99%;
@ -32,7 +33,7 @@
}
.nav-link{
position:absolute;
top:13px;
top:17px;
width:120px;
height:30px;
border-radius:2px;
@ -45,7 +46,7 @@
width:111px;
padding: 3px 0px;
height: auto;
top:7px;
top:12px;
text-align:center;
font-weight:bold;
border-radius: 3px;
@ -61,7 +62,7 @@
}
.notifications-icon{
right:50px;
top:0px;
top:5px;
width:22px;
height:41px;
display:block;
@ -76,7 +77,7 @@
}
.notifications-number{
position:absolute;
top:3px;
top:2px;
left:11px;
background:$red;
padding:2px 7px;
@ -100,7 +101,7 @@
}
.nav-search-form{
position:absolute;
top:5px;
top:7px;
left:calc(50px + 5vw);
width: calc(55vw - 30px);
@media screen and ( min-width: 350px ){
@ -123,7 +124,7 @@
width: calc(100% - 12px);
border-radius:3px;
border:0px;
padding:6px;
padding:8px;
font-size:0.9em;
background:#e8e7e7;
-webkit-appearance: none;
@ -133,7 +134,7 @@
height: 33px;
width: 33px;
background: $dark-gray;
margin-top:-5px;
margin-top:-6px;
border-radius: 100%;
border: 0;
overflow: hidden;
@ -171,7 +172,7 @@
all: unset;
position:absolute;
right:0px;
top:3px;
top:8px;
padding-top:6px;
padding-bottom:6px;
padding-left:28px;
@ -197,12 +198,12 @@
right:-3px;
padding:30px 10px;
text-align:left;
background:rgb(255, 255, 255);
background: $tan;
border: 1px solid rgb(219,222,225);
border-top:0px;
display:none;
width:calc(100vw - 20px);
top: 37px;
top: 45px;
@media screen and ( min-width: 380px ){
position: fixed;
width: 230px;
@ -233,7 +234,7 @@
font-weight:500;
}
&:hover{
background:$light-purple;
background:darken($tan,2%);
}
}
a{
@ -249,9 +250,10 @@
.logo{
width:33px;
height:21px;
padding:5px 8px 4px 10px;
margin-top:5px;
padding:7px 8px 6px 10px;
margin-top:7px;
fill:white;
border-radius: 3px;
// border-right:1px solid #a5a6a8;
// border-left:1px solid #a5a6a8;
background:$black;

193
app/assets/stylesheets/user-profile-header.scss
View file

@ -1,10 +1,14 @@
@import 'variables';
.user-profile-header{
padding:calc(0.6vw + 15px) 0px calc(0.1vw + 60px);
margin-bottom:-85px;
padding:calc(1.8vw + 15px) 0px;
font-family: $helvetica;
position:relative;
overflow:hidden;
width:1216px;
max-width:92%;
margin: 30px auto 20px;
background: white;
border-radius: 3px;
&.tag-header{
// padding-left:calc(2vw + 12px);
h1{
@ -18,14 +22,6 @@
font-size:calc(0.9vw + 28px);
font-weight:500;
}
@media screen and ( min-width: 950px ){
width:580px;
margin-left: calc(0.2vw + 320px);
text-align:left;
}
}
.slanty-accent{
transform: skewX(7deg);
}
}
&.readinglist-header{
@ -90,25 +86,10 @@
}
}
}
.slanty-accent{
width: 23vw;
position:absolute;
left:-10vw;
top:0px;
bottom: 0px;
transform: skewX(-7deg);
@media screen and ( min-width: 1260px ){
width: calc(58vw - 430px);
}
}
.user-profile-header-container{
overflow-y: auto;
}
.user-profile-header-container,.tag-or-query-header-container{
width:1220px;
max-width:96%;
margin:auto;
margin-bottom:20px;
margin: auto;
overflow-y: auto;
h1 {
position:relative;
}
@ -128,17 +109,17 @@
.profile-pic-wrapper{
float:left;
width:calc(14.5vw + 60px);
max-width: 300px;
max-width: 270px;
position:relative;
z-index:5;
.profile-pic{
width:calc(12.2vw + 50px);
height:calc(12.2vw + 50px);
border-radius:200px;
max-width:270px;
max-height:270px;
max-width:220px;
max-height:220px;
border: 4px solid white;
margin-top:10px;
margin-top:2vw;
background: no-repeat center center;
background-size: cover;
img{
@ -151,95 +132,121 @@
float:left;
width:calc(100% - (13vw + 95px));
padding-top: calc(2px + 2.7vw);
@media screen and ( min-width: 1240px ){
min-height: 270px;
}
h1{
margin:5px auto 1vw;
font-weight:500;
font-weight:bold;
color:rgb(27, 27, 28);
font-size:26px;
padding:0;
@media screen and ( min-width: 382px ){
font-size:31px;
}
padding-right: 15px;
line-height:1.1em;
@media screen and ( min-width: 430px ){
font-size:48px;
font-size:calc( 5vw + 10px);
}
@media screen and ( min-width: 950px ){
font-size:70px;
margin-top:0px;
}
}
p{
font-size:16px;
p.profile-description{
padding:0px 0px;
margin:0;
color:rgb(67, 75, 79);
font-style: italic;
color:$medium-gray;
width: 94%;
font-size:0.9em;
margin-top:12px;
@media screen and ( min-width: 430px ){
font-size:0.97em;
margin-top:0px;
}
}
}
.social{
font-size:15px;
text-align:center;
// width:550px;
max-width:100%;
float:left;
margin:14px 0px 18px;
margin:10px 0px 10px;
z-index:3;
position:relative;
&.all-three-present{
a{
padding:0px 2px;
}
}
@media screen and ( min-width: 600px ){
text-align:left;
display:inline-block;
}
@media screen and ( max-width: 450px ){
&.all-three-present{
margin:22px auto 22px;
width:100%;
text-align:center;
a{
padding:0px 30px;
margin-right:1px;
}
.social-anchor{
display:none;
}
}
}
&.no-description{
text-align:left;
a{
margin-top:3px;
padding-left:0;
}
@media screen and ( min-width: 450px ){
a{
margin-top:-6px;
}
}
}
a{
margin-right:5px;
display:inline-block;
margin-bottom:0px;
margin-top:0px;
padding:3px;
@media screen and ( min-width: 580px ){
margin-bottom:8px;
}
.icon-img{
width:15px;
height:15px;
vertical-align:-6px;
margin:0px 1px;
opacity:1;
background:white;
padding:3px;
border-radius:100px;
border:1px solid darken($light-gray,10%);
width:23px;
height:23px;
margin: 0px 0px;
@media screen and ( min-width: 580px ){
margin:3px;
width:28px;
height:28px;
margin-right: 8px;
}
@media screen and ( min-width: 1240px ){
margin:1px;
margin-right: 5px;
width:30px;
height:30px;
margin-bottom: 40px;
}
}
}
}
}
.user-profile-header-container{
@media screen and ( min-width: 1240px ){
width: calc( 100% - 400px);
margin-left: 6%;
}
}
.user-metadata-details{
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
@media screen and ( min-width: 1240px ){
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
width: 360px;
}
.user-metadata-details-inner{
padding: 15px 0px;
font-size: 1.2em;
margin-left: 5%;
@media screen and ( min-width: 1240px ){
position: absolute;
top: 45%;
transform: translateY(-45%);
border-left: 3px solid $outline-color;
padding: 15px 0px;
}
.row{
padding: 8px 0px;
display: inline-block;
padding-left: 20px;
width: 320px;
}
.key{
font-size: 0.7em;
font-weight: 800;
margin-bottom: 2px;
color: $medium-gray;
}
.value{
display: inline-block;
font-size: 0.9em;
margin-bottom: 5px;
}
}
}
.tag-action-buttons{
height:30px;
margin-top:calc(0.5vw + 6px);
@ -264,6 +271,7 @@
position:relative;
z-index:5;
display:inline-block;
margin-left: 5px;
}
.user-profile-follow-button{
background: $green;
@ -271,7 +279,7 @@
border:0;
font-size:17px;
border-radius:3px;
vertical-align:2px;
vertical-align:3px;
padding:2px 6px;
cursor:pointer;
min-width: 120px;
@ -280,9 +288,16 @@
opacity:1;
}
@media screen and ( min-width: 430px ){
font-size:18px;
padding:3px 8px;
vertical-align:7px;
border-radius:5px;
min-width: 140px;
}
@media screen and ( min-width: 950px ){
font-size:22px;
padding:4px 8px;
vertical-align:6px;
vertical-align:12px;
border-radius:5px;
min-width: 140px;
}

5
app/assets/stylesheets/variables.scss
View file

@ -22,4 +22,7 @@ $bold-blue: #0045ff;
$helvetica: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$helvetica-condensed: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
$shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
$outline-color: darken($light-medium-gray, 2%);
$shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
$bold-shadow: 3px 3px 0px darken($light-medium-gray, 13%);

17
app/controllers/social_previews_controller.rb
View file

@ -1,9 +1,24 @@
class SocialPreviewsController < ApplicationController
def show
def article
@article = Article.find(params[:id])
not_found unless @article.published
render layout: false
end
def user
@user = User.find(params[:id]) || not_found
render layout: false
end
def organization
@user = Organization.find(params[:id]) || not_found
render "user", layout: false
end
def tag
@tag = Tag.find(params[:id]) || not_found
render layout: false
end
end

2
app/helpers/application_helper.rb
View file

@ -154,7 +154,7 @@ module ApplicationHelper
end
def user_colors_style(user)
"background-color:#{user_colors(user)[:bg]};color:#{user_colors(user)[:text]}"
"border: 2px solid #{HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88)}; box-shadow: 5px 6px 0px #{user_colors(user)[:bg]}"
end
def user_colors(user)

19
app/views/articles/_comments_section.html.erb
View file

@ -1,19 +1,24 @@
<% cache("user-profile-comments-#{@user.updated_at}-#{@user.id}-#{@comments.first&.id}-#{@comments.size}", :expires_in => 1.day) do %>
<style>
.index-comments header {
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>
}
</style>
<div class="index-comments">
<% if @comments.any? %>
<% if params[:view] == "comments" %>
<div class="breadcrumb"><a href="<%= @user.path %>">View All Activity</a></div>
<h2>
<header>
<% if @user.comments_count > 250 %>
<img class="emoji-img" src="<%= asset_path("comments-bubble.svg") %>"/> Last 250 Comments
Last 250 Comments
<% else %>
<img class="emoji-img" src="<%= asset_path("comments-bubble.svg") %>"/> All <%= @user.comments_count %> Comments
All <%= @user.comments_count %> Comments
<% end %>
</h2>
</header>
<% else %>
<h2>
<img class="emoji-img" src="<%= asset_path("comments-bubble.svg") %>"/> Recent Comments
</h2>
<header>
Recent Comments
</header>
<% end %>
<% end %>
<% @comments.each do |comment| %>

2
app/views/articles/_main_stories_feed.html.erb
View file

@ -4,7 +4,7 @@
<% num_showing += 1 %>
<% break if (num_showing == 3 && user_signed_in?) && @home_page %>
<% if !user_signed_in? && i == 4 %>
<div class="single-article single-article-small-pic feed-cta" id="in-feed-cta" style="background-color: #FBFD8B">
<div class="single-article single-article-small-pic feed-cta" id="in-feed-cta">
<div class="cta-container" id="cta-content">
<h2>
<% if @tag.blank? %>

138
app/views/articles/_sidebar.html.erb
View file

@ -3,76 +3,10 @@
<div class="side-bar">
<% if @user && @user.class.name == "User" %>
<div class="user-sidebar">
<% if @user.employment_title.present? || @user.location.present? || @user.education.present? || @user.looking_for_work_publicly.present? || @user.email_public.present? %>
<div class="widget">
<header>
&lt;ABOUT&gt;
</header>
<div class="widget-body">
<% if @user.email_public %>
<div class="row">
<div class="key">
📭
</div>
<div class="value">
<a href="mailto:<%= @user.email %>"><%= @user.email %></a>
</div>
</div>
<% end %>
<% if @user.employer_name.present? %>
<div class="row">
<div class="key">
💼
</div>
<div class="value">
<% if @user.employment_title.present? %>
<span><%= @user.employment_title %> at </span>
<% end %>
<% if @user.employer_url.present? %>
<a href="<%= @user.employer_url %>" target="_blank" rel="noopener"><%= @user.employer_name %></a>
<% else %>
<%= @user.employer_name %>
<% end %>
</div>
</div>
<% end %>
<% if @user.location.present? %>
<div class="row">
<div class="key">
📍
</div>
<div class="value">
<%= @user.location %>
</div>
</div>
<% end %>
<% if @user.looking_for_work_publicly == true && @user.looking_for_work == true %>
<div class="row">
<div class="key">
🔎
</div>
<div class="value">
I'm looking for work!
</div>
</div>
<% end %>
<% if @user.education.present? %>
<div class="row">
<div class="key">
🏫
</div>
<div class="value">
<%= @user.education %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<% if @user.mostly_work_with.present? %>
<div class="widget">
<header>
&lt;MY TOOLBOX&gt;
skills/languages
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.mostly_work_with %>
@ -82,7 +16,7 @@
<% if @user.currently_learning.present? %>
<div class="widget">
<header>
&lt;LEARNING&gt;
learning/trying
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.currently_learning %>
@ -92,7 +26,7 @@
<% if @user.currently_hacking_on.present? %>
<div class="widget">
<header>
&lt;HACKING ON&gt;
projects and hacks
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.currently_hacking_on %>
@ -102,7 +36,7 @@
<% if @user.available_for.present? %>
<div class="widget">
<header>
&lt;AVAILABLE FOR&gt;
available for
</header>
<div class="widget-body">
<%= sanitized_sidebar @user.available_for %>
@ -111,47 +45,6 @@
<% end %>
</div>
<% elsif @user && @user.class.name == "Organization" %>
<% if @organization.location.present? || @organization.company_size.present? || @organization.email.present? %>
<div class="user-sidebar">
<div class="widget">
<header>
&lt;ABOUT&gt;
</header>
<div class="widget-body">
<% if @organization.location.present? %>
<div class="row">
<div class="key">
📍
</div>
<div class="value">
<%= @organization.location %>
</div>
</div>
<% end %>
<% if @organization.company_size.present? %>
<div class="row">
<div class="key">
👥
</div>
<div class="value">
<%= @organization.company_size %>
</div>
</div>
<% end %>
<% if @organization.email.present? %>
<div class="row">
<div class="key">
📭
</div>
<div class="value">
<a href="mailto:<%= @organization.email %>"><%= @organization.email %></a>
</div>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
<% if @organization.story.present? %>
<div class="widget">
<header>
@ -195,7 +88,7 @@
<% if @tag_model && @tag_model.short_summary.present? %>
<div class="widget">
<header>
<#<%= @tag.upcase %> 👋>
#<%= @tag %> 👋
</header>
<div class="widget-body">
<%= @tag_model.short_summary.html_safe %>
@ -205,21 +98,20 @@
<% if @tag_model && @tag_model.rules_html.present? %>
<div class="widget">
<header>
&lt;SUBMISSION GUIDELINES&gt;
submission guidelines
</header>
<div class="widget-body">
<%= @tag_model.rules_html.html_safe %>
<a class="cta cta-button" href="/new/<%= @tag %>" >
WRITE A POST
</a>
</div>
<p><center><a class="cta cta-button" href="/new/<%= @tag %>"
style="background:<%= @tag_model.bg_color_hex %>;color:<%= @tag_model.text_color_hex %>;">
WRITE A POST
</a></center></p>
</div>
<% end %>
<% if @tag_model && @tag_model.wiki_body_html.present? %>
<div class="widget">
<header>
&lt;ABOUT <%= @tag.upcase %>&gt;
about #<%= @tag %>
</header>
<div class="widget-body">
<%= @tag_model.wiki_body_html.html_safe %>
@ -229,9 +121,10 @@
<% if @tag == "javascript" %>
<div class="widget sponsorship-widget <%= "showing" unless user_signed_in? %>" id="sponsorship-widget">
<header>
&lt;<a href="/sponsors" style="color:black">COMMUNITY SPONSOR</a><span class="emoji">
<a href="/sponsors">community sponsors</a>
<span class="emoji">
<img src="<%= asset_path "emoji/emoji-one-heart.png" %>" />
</span>&gt;
</span>
</header>
<div class="widget-body">
<div class="sidebar-sponsor">
@ -285,9 +178,10 @@
<%= render "articles/sidebar_nav" %>
<div class="widget sponsorship-widget <%= "showing" unless user_signed_in? %>" id="sponsorship-widget">
<header>
&lt;<a href="/sponsors" style="color:black">COMMUNITY SPONSORS</a><span class="emoji">
<a href="/sponsors">community sponsors</a>
<span class="emoji">
<img src="<%= asset_path "emoji/emoji-one-heart.png" %>" />
</span>&gt;
</span>
</header>
<div class="widget-body">
<div class="sidebar-sponsor">

40
app/views/articles/_sidebar_additional.html.erb
View file

@ -5,9 +5,9 @@
<% @user.github_repos.where(featured: true).order({stargazers_count: :desc}, {name: :asc}).each do |repo| %>
<a class="widget" href="<%= repo.url %>" target="_blank">
<header>
<span class="emoji"><img src="<%= asset_path("github-logo.svg") %>" /></span> <%= repo.name %>
<span class="emoji"><img src="<%= asset_path("github-logo.svg") %>" /></span><%= repo.name %>
</header>
<div class="widget-body" style="font-size:0.85em;">
<div class="widget-body">
<%= repo.description %>
<div class="widget-footer">
<% if repo.fork %>
@ -21,31 +21,12 @@
</div>
</a>
<% end %>
<% if Reaction.for_display(@user).size > 0 %>
<div class="widget">
<header>
&lt;RECENT REACTIONS&gt;
</header>
<div class="widget-body">
<% Reaction.for_display(@user).each do |reaction| %>
<div class="row">
<div class="key">
<%= image_tag(ReactionImage.new(reaction.category).path, style:"height:22px;width:22px;border:0px;vertical-align:5px;") %>
</div>
<div class="value" style="padding:5px 2px 0px 10px;">
<a href="<%= reaction.reactable.path %>"><%= reaction.reactable.title %>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
<% elsif @user && @user.class.name == "Organization" %>
<% elsif @tag %>
<% if Article.active_threads([@tag,"discuss"], Timeframer.new(params[:timeframe]).datetime).any? %>
<div class="widget">
<header>
<#DISCUSS>
#discuss
</header>
<div class="widget-body">
<div class="widget-link-list">
@ -71,13 +52,12 @@
DEV.TO(GETHER)
</header>
<div class="widget-body">
<p style="margin-bottom: 12px;">Join thousands of software developers leveling up their code and careers.</p>
<center style="margin-bottom: 12px;">
<center style="margin-bottom: 2px;">
<a href="/users/auth/twitter?state=navbar_basic" class="cta cta-button login-cta-button" data-no-instant>
LOG IN WITH TWITTER
SIGN IN VIA TWITTER
</a>
<a href="/users/auth/github?state=navbar_basic" class="cta cta-button login-cta-button" data-no-instant>
LOG IN WITH GITHUB
SIGN IN VIA GITHUB
</a>
</center>
</div>
@ -115,7 +95,7 @@
<% if Article.active_help.any? %>
<div class="widget">
<header>
<a href="/t/help"><#HELP></a>
<a href="/t/help">#help</a>
</header>
<div class="widget-body">
<div class="widget-link-list">
@ -161,7 +141,7 @@
<% end %>
<div class="widget">
<header>
<a href="/t/discuss"><#DISCUSS></a>
<a href="/t/discuss">#discuss</a>
</header>
<div class="widget-body">
<div class="widget-link-list">
@ -175,7 +155,7 @@
</div>
<div class="widget">
<header>
<a href="/t/explainlikeimfive"><#EXPLAINLIKEIMFIVE></a>
<a href="/t/explainlikeimfive">#explainlikeimfive</a>
</header>
<div class="widget-body">
<div class="widget-link-list">
@ -189,7 +169,7 @@
</div>
<div class="widget" id="podcast-widget">
<header>
<a href="/pod">&lt;LATEST PODCASTS&gt;</pod>
<a href="/pod">latest podcasts</pod>
</header>
<div class="widget-body">
<% @podcast_episodes.each do |ep| %>

4
app/views/articles/_sidebar_nav.html.erb
View file

@ -29,9 +29,9 @@
<div class="widget sidebar-nav-block sidebar-tag-block">
<div class="sidebar-nav-header sidebar-nav-header-middle">
<% if user_signed_in? %>
&lt;MY TAGS&gt;
my tags
<% else %>
&lt;DESIGN YOUR EXPERIENCE&gt;
design your experience
<% end %>
</div>
<div class="sidebar-nav-block-inner">

2
app/views/articles/_sticky_nav.html.erb
View file

@ -3,7 +3,7 @@
<style>
.primary-sticky-nav-author,.primary-sticky-nav-author-element{
border: 1px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
box-shadow: 3px 3px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
}
.primary-sticky-nav-author button{
background-color: <%= user_colors(@actor)[:bg] %> !important;

107
app/views/articles/_user_metadata.html.erb Normal file
View file

@ -0,0 +1,107 @@
<style>
.user-metadata-details-inner a {
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.95) %>
}
</style>
<div class="user-metadata-details">
<div class="user-metadata-details-inner">
<% if @organization %>
<% if @organization.location.present? %>
<div class="row">
<div class="key">
headquarters
</div>
<div class="value">
<%= @organization.location %>
</div>
</div>
<% end %>
<% if @organization.company_size.present? %>
<div class="row">
<div class="key">
employees
</div>
<div class="value">
<%= @organization.company_size %>
</div>
</div>
<% end %>
<% if @organization.email.present? %>
<div class="row">
<div class="key">
support_email
</div>
<div class="value">
<a href="mailto:<%= @organization.email %>"><%= @organization.email %></a>
</div>
</div>
<% end %>
<% else %>
<% if @user.email_public %>
<div class="row">
<div class="key">
email
</div>
<div class="value">
<a href="mailto:<%= @user.email %>"><%= @user.email %></a>
</div>
</div>
<% end %>
<% if @user.employer_name.present? %>
<div class="row">
<div class="key">
work
</div>
<div class="value">
<% if @user.employment_title.present? %>
<span><%= @user.employment_title %> at </span>
<% end %>
<% if @user.employer_url.present? %>
<a href="<%= @user.employer_url %>" target="_blank" rel="noopener"><%= @user.employer_name %></a>
<% else %>
<%= @user.employer_name %>
<% end %>
</div>
</div>
<% end %>
<% if @user.location.present? %>
<div class="row">
<div class="key">
location
</div>
<div class="value">
<%= @user.location %>
</div>
</div>
<% end %>
<% if @user.looking_for_work_publicly == true && @user.looking_for_work == true %>
<div class="row">
<div class="key">
work_status
</div>
<div class="value">
I'm looking for work!
</div>
</div>
<% end %>
<% if @user.education.present? %>
<div class="row">
<div class="key">
education
</div>
<div class="value">
<%= @user.education %>
</div>
</div>
<% end %>
<% end %>
<div class="row">
<div class="key">
joined
</div>
<div class="value">
<%= @user.created_at.strftime("%b %e, %Y") %>
</div>
</div>
</div>
</div>

105
app/views/articles/index.html.erb
View file

@ -90,71 +90,76 @@
<% if @user %>
<style>
.widget header{
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.8) %>;
}
.slanty-accent{
background-color: <%= HexComparer.new([user_colors(@user)[:bg]]).accent %>;
color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
}
<% if user_colors(@user)[:bg].downcase.start_with?("#fff") %>
.user-profile-follow-button {
border: 1px solid <%= user_colors(@user)[:text] %> !important;
}
<% end %>
</style>
<div class="user-profile-header" style="<%= user_colors_style(@user) %>" itemscope itemtype="http://schema.org/Person" itemprop="mainEntityOfPage">
<meta itemprop="url" content="https://dev.to/<%=@user.username%>">
<div class="user-profile-header-container">
<div class="slanty-accent"></div>
<div class="profile-pic-wrapper">
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(320) %>" itemprop="image" alt="<%= @user.username %> profile" style="border-color:<%=user_colors(@user)[:text] %>;background:<%=user_colors(@user)[:text] %>"/>
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(320) %>" itemprop="image" alt="<%= @user.username %> profile" style="border-color:<%=user_colors(@user)[:bg] %>;background:<%=user_colors(@user)[:bg] %>"/>
</div>
<div class="profile-details">
<h1 style="color:<%=user_colors(@user)[:text] %>"><span itemprop="name"><%= @user.name %></span>
<h1 style="color:<%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %>"><span itemprop="name"><%= @user.name %></span>
<span class="user-profile-follow-button-wrapper">
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:bg] %>;background-color:<%=user_colors(@user)[:text] %>" data-info='{"id":<%= @user.id%>,"className":"<%= @user.class.name %>"}'>&nbsp;</button>
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:text] %>;background-color:<%=user_colors(@user)[:bg] %>" data-info='{"id":<%= @user.id%>,"className":"<%= @user.class.name %>"}'>&nbsp;</button>
</span>
</h1>
<p style="color:<%= user_colors(@user)[:text] %>" itemprop="description"><%= @user.summary %></p>
<p class="profile-description" itemprop="description">
<%= @user.summary.present? ? @user.summary : ["undefined is not a bio","404 bio not found"].sample %>
</p>
<style>
.profile-details .social .icon-img path{
fill: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
}
</style>
<p class="social">
<% if @user.twitter_username.present? %>
<a href="http://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener">
<%= inline_svg("twitter-logo.svg", class:"icon-img") %>
</a>
<% end %>
<% if @user.github_username.present? %>
<a href="http://github.com/<%= @user.github_username %>" target="_blank" rel="noopener">
<%= inline_svg("github-logo.svg", class:"icon-img") %>
</a>
<% end %>
<% if @user.website_url.present? %>
<a href="<%= @user.website_url %>" target="_blank" rel="noopener">
<%= inline_svg("external-link-logo.svg", class:"icon-img") %>
</a>
<% end %>
</p>
</div>
<p class="social <%= "all-three-present" if (@user.twitter_username.present? && @user.github_username.present? && @user.website_url.present?)%> <%= "no-description" if @user.summary.blank? %>">
<% if @user.twitter_username.present? %>
<a style="color:<%= user_colors(@user)[:text] %>" href="http://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener"><%= icon("twitter","22") %>
<span class="social-anchor"><%= @user.twitter_username %></span>
</a>
<% end %>
<% if @user.github_username.present? %>
<a style="color:<%= user_colors(@user)[:text] %>" href="http://github.com/<%= @user.github_username %>" target="_blank" rel="noopener"><%= icon("github","22") %>
<span class="social-anchor"><%= @user.github_username %></span>
</a>
<% end %>
<% if @user.website_url.present? %>
<a style="color:<%= user_colors(@user)[:text] %>" href="<%= @user.website_url %>" target="_blank" rel="noopener">
<%= icon("link","22") %>
<span class="social-anchor"><%= beautified_url(@user.website_url)%></span>
</a>
<% end %>
</p>
</div>
<%= render "articles/user_metadata" %>
</div>
<% elsif @tag %>
<style>
.widget header{
color: <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000",@tag_model.text_color_hex || "#ffffff"]).brightness(0.8) %>
}
.slanty-accent{
background-color: <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"]).accent %>
.tag-header{
border: 2px solid <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000",@tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
box-shadow: 5px 6px 0px <%= HexComparer.new([@tag_model.bg_color_hex || "#0000000",@tag_model.text_color_hex || "#ffffff"]).brightness(0.88) %>;
}
</style>
<div class="user-profile-header tag-header" style="background-color:<%=@tag_model.bg_color_hex %>;color:<%=@tag_model.text_color_hex %>;">
<div class="slanty-accent"></div>
<div class="user-profile-header tag-header">
<div class="tag-or-query-header-container">
<% if @tag_model && @tag_model.pretty_name.present? %>
<h1> <%= @tag_model.pretty_name %> </h1>
<% else %>
<h1> <%= @tag %> </h1>
<% end %>
<% if @tag_model %>
<div class="tag-action-buttons">
<span class="user-profile-follow-button-wrapper">
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%=@tag_model.bg_color_hex %>;background-color:<%=@tag_model.text_color_hex %>" data-info='{"id":<%= @tag_model.id%>,"className":"Tag"}'>&nbsp;</button>
</span>
</div>
<% end %>
<h1>
<% if @tag_model && @tag_model.pretty_name.present? %>
<%= @tag_model.pretty_name %>
<% else %>
<%= @tag %>
<% end %>
<% if @tag_model %>
<span class="user-profile-follow-button-wrapper">
<button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%=@tag_model.text_color_hex %>;background-color:<%=@tag_model.bg_color_hex %>" data-info='{"id":<%= @tag_model.id%>,"className":"Tag"}'>&nbsp;</button>
</span>
<% end %>
</h1>
</div>
</div>
<% elsif @query %>
@ -202,13 +207,11 @@
<% if @home_page || @tag %>
<% if @tag_model && @tag_model.supported %>
<style>
.nav-chronofiter-link,.narrow-nav-select button {
color: <%= @tag_model.text_color_hex %> !important;
}
.nav-chronofiter-link.selected {
background: <%= @tag_model.text_color_hex %> !important;
color: <%= @tag_model.bg_color_hex %> !important;
background: <%= @tag_model.bg_color_hex %> !important;
color: <%= @tag_model.text_color_hex %> !important;
box-shadow: 3px 4px 0px <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
border: 1px solid <%= HexComparer.new([@tag_model.bg_color_hex || "#ffffff"], 4).accent %> !important;
}
.narrow-nav-menu a.selected {
color: <%= @tag_model.text_color_hex %> !important;

2
app/views/layouts/application.html.erb
View file

@ -25,7 +25,7 @@
}
@media screen and (min-width: 950px){
.home {
margin-top: 22px;
margin-top: 26px;
}
}
</style>

0
app/views/social_previews/show.html.erb → app/views/social_previews/article.html.erb
View file

96
app/views/social_previews/tag.html.erb Normal file
View file

@ -0,0 +1,96 @@
<% accent_color = HexComparer.new([@tag.bg_color_hex,@tag.text_color_hex]).biggest %>
<% color = HexComparer.new([@tag.bg_color_hex,@tag.text_color_hex]).brightness(1.4) %>
<% dark_color = HexComparer.new([@tag.bg_color_hex,@tag.text_color_hex]).brightness(0.7) %>
<style>
body{
background: white;
margin:0;
padding:0;
}
.preview-div-wrapper{
overflow: hidden;
position:relative;
}
.circle{
border-radius: 1000px;
background: <%= accent_color %>;
position: absolute;
}
.circle1{
height: 40vw;
width: 40vw;
right: -<%= rand(2..15) %>vw;
bottom: -<%= rand(2..15) %>vw;
}
.circle2{
height: 30vw;
width: 30vw;
left: <%= rand(2..16) %>vw;
bottom: 0vw;
}
.circle3{
height: 24vw;
width: 24vw;
left: -8vw;
top: -<%= rand(2..6) %>vw;
}
.preview-div{
background: #fff;
border: 0.25vw solid <%= dark_color %>;
box-shadow: 0.8vw 1vw 0px <%= dark_color %>;
width: 88vw;
height: 44vw;
margin: 2.5vw auto 5vw;
overflow: hidden;
position:relative;
}
h1{
color: <%= dark_color %>;
width: 92%;
margin: 10vw auto 0vw;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 12vw;
}
h1 img{
border-radius: 100vw;
height: 15vw;
width: 15vw;
vertical-align: -4.3vw;
border: 0.55vw solid <%= dark_color %>;
}
h2{
color: black;
width: 92%;
margin: 0vw auto 1vw;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 6vw;
}
.preview-dev-logo{
position:absolute;
bottom: 2.1vw;
right: 2.1vw;
text-align:right;
}
.logo{
height:6vw;
fill: <%= dark_color %>;
}
</style>
<div class="preview-div-wrapper">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="preview-div">
<h1>
#<%= @tag.name %>
</h1>
<% if @tag.pretty_name %>
<h2>
<%= @tag.pretty_name %>
</h2>
<% end %>
<div class="preview-dev-logo">
<%= inline_svg("devplain.svg", class: "logo", size: '9vw * 9vw') %>
</div>
</div>
</div>

85
app/views/social_previews/user.html.erb Normal file
View file

@ -0,0 +1,85 @@
<% accent_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).biggest %>
<% color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(1.4) %>
<% dark_color = HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.7) %>
<style>
body{
background: white;
margin:0;
padding:0;
}
.preview-div-wrapper{
overflow: hidden;
position:relative;
}
.circle{
border-radius: 1000px;
background: <%= accent_color %>;
position: absolute;
}
.circle1{
height: 40vw;
width: 40vw;
right: -<%= rand(2..15) %>vw;
bottom: -<%= rand(2..15) %>vw;
}
.circle2{
height: 30vw;
width: 30vw;
left: <%= rand(2..16) %>vw;
bottom: 0vw;
}
.circle3{
height: 24vw;
width: 24vw;
left: -8vw;
top: -<%= rand(2..6) %>vw;
}
.preview-div{
background: #fff;
border: 0.25vw solid <%= dark_color %>;
box-shadow: 0.8vw 1vw 0px <%= dark_color %>;
width: 88vw;
height: 44vw;
margin: 2.5vw auto 5vw;
overflow: hidden;
position:relative;
}
h1{
color: <%= dark_color %>;
width: 92%;
margin: 10vw auto 1vw;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 8vw;
}
h1 img{
border-radius: 100vw;
height: 15vw;
width: 15vw;
vertical-align: -4.3vw;
border: 0.55vw solid <%= dark_color %>;
}
.preview-dev-logo{
position:absolute;
bottom: 2.1vw;
right: 2.1vw;
text-align:right;
}
.logo{
height:6vw;
fill: <%= dark_color %>;
}
</style>
<div class="preview-div-wrapper">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="preview-div">
<h1>
<img src="<%= ProfileImage.new(@user).get(90) %>" />
<%= @user.name %>
<h1>
<div class="preview-dev-logo">
<%= inline_svg("devplain.svg", class: "logo", size: '9vw * 9vw') %>
</div>
</div>
</div>

18
app/views/users/_org_admin.html.erb
View file

@ -71,12 +71,20 @@
<%= f.label :url, "Site url" %>
<%= f.url_field :url, maxlength: 64, placeholder: "http://yoursite.com" %>
</div>
<div class="field">
<%= f.label :tag_line %>
<%= f.text_field :tag_line, maxlegth: 60 %>
</div>
<div class="field">
<%= f.label :summary %>
<%= f.text_area :summary, maxlegth: 250 %>
</div>
<div class="field">
<%= f.label :location %>
<%= f.text_field :location, maxlength: 64 %>
</div>
<div class="field">
<%= f.label :email %>
<%= f.label :email, "Support Email" %>
<%= f.text_field :email, maxlength: 64 %>
</div>
<div class="field">
@ -91,14 +99,6 @@
<%= f.label :tech_stack, "Our Stack" %>
<%= f.text_area :tech_stack, maxlength: 200 %>
</div>
<div class="field">
<%= f.label :tag_line %>
<%= f.text_area :tag_line, maxlegth: 60 %>
</div>
<div class="field">
<%= f.label :summary %>
<%= f.text_area :summary, maxlegth: 250 %>
</div>
<div class="field">
<label></label>
<%= f.submit "SUBMIT", class: "cta" %>

6
app/views/users/_profile.html.erb
View file

@ -100,15 +100,15 @@
<%= f.text_field :employment_title, maxlength: 64 %>
</div>
<div class="field">
<%= f.label :mostly_work_with %>
<%= f.label :mostly_work_with, "Skills/Languages" %>
<%= f.text_area :mostly_work_with, placeholder: "What tools and languages are you most experienced with? are you specialized or more of a generalist?", maxlength: 640 %>
</div>
<div class="field">
<%= f.label :currently_learning %>
<%= f.label :currently_learning, "I'm getting into" %>
<%= f.text_area :currently_learning, placeholder: "What are you learning right now? what are the new tools and languages you're picking up in 2018?", maxlength: 640 %>
</div>
<div class="field">
<%= f.label :currently_hacking_on %>
<%= f.label :currently_hacking_on, "My projects and hacks" %>
<%= f.text_area :currently_hacking_on, placeholder: "What projects are currently occupying most of your time?", maxlength: 640 %>
</div>
<div class="field">

7
config/routes.rb
View file

@ -94,13 +94,18 @@ Rails.application.routes.draw do
resources :additional_content_boxes, only: [:index]
resources :videos, only: [:create, :new]
resources :video_states, only: [:create]
resources :social_previews, only: [:show]
get "/notifications/:username" => "notifications#index"
patch "/onboarding_update" => "users#onboarding_update"
get "email_subscriptions/unsubscribe"
post "chat_channels/:id/moderate" => "chat_channels#moderate"
# resources :users
get "/social_previews/article/:id" => "social_previews#article"
get "/social_previews/user/:id" => "social_previews#user"
get "/social_previews/organization/:id" => "social_previews#organization"
get "/social_previews/tag/:id" => "social_previews#tag"
### Subscription vanity url
post "membership-action" => "stripe_subscriptions#create"