public/homebrewery
1
0
Fork 0
mirror of https://github.com/stolksdorf/homebrewery.git synced 2025-12-19 21:01:33 +00:00
Code Issues Releases Wiki Activity

Added tooltip to metadata editor and upped the version of font awesome

Browse Source
This commit is contained in:
Scott Tolksdorf
2017-01-14 14:35:36 -08:00
parent 5fe7c7a6d8
commit 9b936f42f3
5 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@@ -1,5 +1,9 @@
# changelog # changelog
### Saturday, 14/01/2017 - v2.7.0cont
- - Added a new Render Warning overlay. It detects situations where the brew may not be rendering correctly (wrong browser, browser is zoomed in...) and let's the user know
### Sunday, 25/12/2016 - v2.7.0 ### Sunday, 25/12/2016 - v2.7.0
- Switching over to using Vitreum v4 - Switching over to using Vitreum v4
- Removed gulp, all tasks are run through npm scripts - Removed gulp, all tasks are run through npm scripts
@@ -11,7 +15,7 @@
- Fixed realtime renderer not functioning if loaded with malformed html on load (thanks u/RattiganIV re:247) - Fixed realtime renderer not functioning if loaded with malformed html on load (thanks u/RattiganIV re:247)
- Removed a lot of unused files in shared - Removed a lot of unused files in shared
- vitreum v4 now lets me use codemirror as a pure node dependacy - vitreum v4 now lets me use codemirror as a pure node dependacy
- Added a new Render Warning overlay. It detects situations where the brew may not be rendering correctly (wrong browser, browser is zoomed in...) and let's the user know
### Saturday, 03/12/2016 - v2.6.0 ### Saturday, 03/12/2016 - v2.6.0

1
client/homebrew/editor/snippetbar/snippetbar.less
View File

@@ -13,6 +13,7 @@
cursor : pointer; cursor : pointer;
line-height : @height; line-height : @height;
text-align : center; text-align : center;
.tooltipLeft("Edit Brew Metadata");
&:hover, &.selected{ &:hover, &.selected{
background-color : #999; background-color : #999;
} }

2
client/template.js
View File

@@ -3,7 +3,7 @@ module.exports = function(vitreum){
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" /> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/assets/homebrew/favicon.ico" type="image/x-icon" />
<title>The Homebrewery - NaturalCrit</title> <title>The Homebrewery - NaturalCrit</title>

2
shared/homebrewery/renderWarnings/renderWarnings.less
View File

@@ -1,5 +1,5 @@
.warnings{ .renderWarnings{
position : fixed; position : fixed;
display : inline-block; display : inline-block;
top : @navbarHeight; top : @navbarHeight;

99
shared/naturalcrit/styles/tooltip.less
View File

@@ -1,7 +1,7 @@
@tooltipColor : #383838; @tooltipColor : #383838;
@arrowSize : 6px; @arrowSize : 6px;
@arrowPosition : 18px; @arrowPosition : 18px;
[data-tooltip]{ [data-tooltip]{
.tooltip(attr(data-tooltip)); .tooltip(attr(data-tooltip));
} }
@@ -17,113 +17,102 @@
[data-tooltip-right]{ [data-tooltip-right]{
.tooltipRight(attr(data-tooltip-right)); .tooltipRight(attr(data-tooltip-right));
} }
.tooltip(@content){ .tooltip(@content){
.tooltipBottom(@content); .tooltipBottom(@content);
} }
.tooltipTop(@content){ .tooltipTop(@content){
.tooltipBase(@content); .tooltipBase(@content);
&:before { &:before {
margin-bottom: -@arrowSize * 2; margin-bottom : -@arrowSize * 2;
border-top-color: @tooltipColor; border-top-color : @tooltipColor;
} }
&:after{ margin-left: -18px; } &:after{ margin-left: -18px; }
&:before, &:after { &:before, &:after{
bottom: 100%; bottom : 100%;
left: 50%; } left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before { &:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateY(-(@arrowSize + 2))); .transform(translateY(-(@arrowSize + 2)));
} }
} }
.tooltipBottom(@content){ .tooltipBottom(@content){
.tooltipBase(@content); .tooltipBase(@content);
&:before { &:before {
margin-top: -@arrowSize * 2; margin-top : -@arrowSize * 2;
border-bottom-color: @tooltipColor; border-bottom-color : @tooltipColor;
} }
&:after{ margin-left: -18px; } &:after{ margin-left: -18px; }
&:before, &:after { &:before, &:after{
top: 100%; top : 100%;
left: 50%; } left : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before { &:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateY(@arrowSize + 2)); .transform(translateY(@arrowSize + 2));
} }
} }
.tooltipLeft(@content){ .tooltipLeft(@content){
.tooltipBase(@content); .tooltipBase(@content);
&:before { &:before {
margin-right: -@arrowSize * 2; margin-right : -@arrowSize * 2;
margin-bottom: -@arrowSize; margin-bottom : -@arrowSize;
border-left-color: @tooltipColor; border-left-color : @tooltipColor;
} }
&:after{ margin-bottom: -14px;} &:after{ margin-bottom: -14px;}
&:before, &:after { &:before, &:after {
right: 100%; right : 100%;
bottom: 50%; } bottom : 50%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before { &:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateX(-(@arrowSize + 2))); .transform(translateX(-(@arrowSize + 2)));
} }
} }
.tooltipRight(@content){ .tooltipRight(@content){
.tooltipBase(@content); .tooltipBase(@content);
&:before { &:before {
margin-left: -@arrowSize * 2; margin-bottom : -@arrowSize;
margin-bottom: -@arrowSize; margin-left : -@arrowSize * 2;
border-right-color: @tooltipColor; border-right-color : @tooltipColor;
} }
&:after{ margin-bottom: -14px;} &:after{ margin-bottom: -14px;}
&:before, &:after { &:before, &:after {
left: 100%; bottom : 50%;
bottom: 50%; } left : 100%;
}
&:hover:after, &:hover:before, &:focus:after, &:focus:before { &:hover:after, &:hover:before, &:focus:after, &:focus:before {
.transform(translateX(@arrowSize + 2)); .transform(translateX(@arrowSize + 2));
} }
} }
.tooltipShow(){ .tooltipShow(){
} }
.tooltipBase(@content){ .tooltipBase(@content){
position: relative; //position: relative;
&:before, &:after{ &:before, &:after{
.animateAll(); .animateAll();
position: absolute; position : absolute;
opacity: 0; z-index : 1000000;
z-index: 1000000; opacity : 0;
pointer-events: none; pointer-events : none;
} }
//Arrow //Arrow
&:before{ &:before{
content: ''; content : '';
background: transparent; z-index : 1000001;
border: @arrowSize solid transparent; background : transparent;
z-index: 1000001; border : @arrowSize solid transparent;
} }
//Box //Box
&:after{ &:after{
content: @content; content : @content;
color: white; visibility : hidden;
background: @tooltipColor; padding : 8px 10px;
padding: 8px 10px; background : @tooltipColor;
font-size: 12px; font-size : 12px;
line-height: 12px; color : white;
white-space: nowrap; line-height : 12px;
visibility: hidden; white-space : nowrap;
} }
&:hover:before, &:hover:after { &:hover:before, &:hover:after {
visibility: visible; visibility : visible;
opacity: 1; opacity : 1;
} }
} }