handle default sizing using preprocesses css

This commit is contained in:
Kyle Spearrin 2017-10-10 15:44:36 -04:00
parent 41c3007821
commit fe73ffc21e
4 changed files with 32 additions and 9 deletions

View File

@ -269,6 +269,18 @@ gulp.task('dist:move', function () {
});
gulp.task('dist:css', function () {
distCss({});
});
gulp.task('dist:css:edge', function () {
distCss({ edge: true });
});
gulp.task('dist:css:firefox', function () {
distCss({ firefox: true });
});
function distCss(preprocessContext) {
return gulp
.src([
// libs
@ -277,9 +289,10 @@ gulp.task('dist:css', function () {
// app
paths.cssDir + 'popup.css'
])
.pipe(preprocess({ context: preprocessContext }))
.pipe(concat(paths.dist + 'popup/css/popup.css'))
.pipe(gulp.dest('.'));
});
}
gulp.task('dist:js', function () {
return distJs(false);
@ -334,17 +347,24 @@ gulp.task('dist:preprocess', function () {
});
gulp.task('dist', ['build'], function (cb) {
return dist(false, cb);
return dist({}, cb);
});
gulp.task('dist:edge', ['build'], function (cb) {
return dist(true, cb);
return dist({ edge: true }, cb);
});
function dist(edge, cb) {
gulp.task('dist:firefox', ['build'], function (cb) {
return dist({ firefox: true }, cb);
});
function dist(o, cb) {
var distCss = o.edge ? 'dist:css:edge' : o.firefox ? 'dist:css:firefox' : 'dist:css';
var distJs = o.edge ? 'dist:js:edge' : 'dist:js';
return runSequence(
'dist:clean',
['dist:move', 'dist:css', edge ? 'dist:js:edge' : 'dist:js'],
['dist:move', distCss, distJs],
'dist:preprocess',
cb);
}
@ -355,7 +375,7 @@ var sidebarActionManifestObj = {
"default_icon": "images/icon19.png"
};
gulp.task('dist-firefox', ['dist'], function (cb) {
gulp.task('dist-firefox', ['dist:firefox'], function (cb) {
gulp.src(paths.dist + 'manifest.json')
.pipe(jeditor(function (manifest) {
manifest.applications = {

View File

@ -8,7 +8,6 @@ angular
self.animation = '';
self.xsBody = $window.screen.availHeight < 600;
self.smBody = !self.xsBody && $window.screen.availHeight <= 800;
self.lgBody = !self.xsBody && !self.smBody && utilsService && !utilsService.isFirefox() && !utilsService.isEdge();
self.disableSearch = utilsService && utilsService.isEdge();
self.inSidebar = utilsService && utilsService.inSidebar($window);

View File

@ -18,7 +18,7 @@
<!-- @endexclude -->
</head>
<body ng-controller="mainController as main" class="{{main.animation}}"
ng-class="{lg: main.lgBody, sm: main.smBody, xs: main.xsBody }">
ng-class="{sm: main.smBody, xs: main.xsBody }">
<div ui-view class="main-view"></div>
<!-- @if true !>

View File

@ -18,10 +18,14 @@ body {
overflow: hidden;
}
body.lg {
/* @ifndef firefox */
/* @ifndef edge */
body {
width: 375px !important;
height: 667px !important;
}
/* @endif */
/* @endif */
body.sm {
width: 375px !important;