diff --git a/grunt/Gruntfile.js b/grunt/Gruntfile.js index 1802ff4..2b035f9 100644 --- a/grunt/Gruntfile.js +++ b/grunt/Gruntfile.js @@ -10,6 +10,30 @@ module.exports = function(grunt) { } }, + spriteGenerator: { + "sprite": { + src: [ + 'images/sprite/*.png' + ], + spritePath: 'images/sprite.png', + stylesheetPath: 'css/sprite.styl', + compositor:'gm', + stylesheet: 'stylus', + stylesheetOptions:{ + prefix:'sprite_', + spritePath:'/image/sprite.png', + pixelRatio:2 + }, + layout:'packed', + layoutOptions:{ + padding:8 + }, + compositorOptions:{ + compressionLevel:9 + } + } + }, + stylus: { compile: { options:{ @@ -28,8 +52,19 @@ module.exports = function(grunt) { '../public/css/style.css':'../public/css/style.raw.css' } } + }, + imagemin: { + static: { + options: { + optimizationLevel: 7 + }, + files: { + '../public/image/sprite.png': 'images/sprite.png' + } + } } + }); @@ -38,6 +73,8 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-internal'); grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('node-sprite-generator'); + grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-csso'); grunt.loadNpmTasks('grunt-contrib-stylus'); @@ -46,5 +83,5 @@ module.exports = function(grunt) { grunt.registerTask('js',['uglify']); grunt.registerTask('default', ['css']); - grunt.registerTask('full',['css','js']) + grunt.registerTask('full',['spriteGenerator','css','imagemin','js']) }; diff --git a/grunt/css/sprite.styl b/grunt/css/sprite.styl new file mode 100644 index 0000000..f06056e --- /dev/null +++ b/grunt/css/sprite.styl @@ -0,0 +1,37 @@ +sprite_account-x = -2px +sprite_account-y = -2px +sprite_account-width = 24px +sprite_account-height = 24px +sprite_account = sprite_account-x sprite_account-y sprite_account-width sprite_account-height +sprite_calendar-x = -30px +sprite_calendar-y = -2px +sprite_calendar-width = 24px +sprite_calendar-height = 24px +sprite_calendar = sprite_calendar-x sprite_calendar-y sprite_calendar-width sprite_calendar-height +sprite_email-x = -2px +sprite_email-y = -30px +sprite_email-width = 24px +sprite_email-height = 24px +sprite_email = sprite_email-x sprite_email-y sprite_email-width sprite_email-height +sprite_web-x = -30px +sprite_web-y = -30px +sprite_web-width = 24px +sprite_web-height = 24px +sprite_web = sprite_web-x sprite_web-y sprite_web-width sprite_web-height + +sprite_sprite-image() + background-image url('/image/sprite.png') +sprite_sprite-size() + background-size 56px 56px +sprite_sprite-position($sprite) + background-position $sprite[0] $sprite[1] +sprite_sprite-width($sprite) + width $sprite[2] +sprite_sprite-height($sprite) + height $sprite[3] +sprite_sprite($sprite) + sprite_sprite-image() + sprite_sprite-size() + sprite_sprite-position($sprite) + sprite_sprite-width($sprite) + sprite_sprite-height($sprite) diff --git a/grunt/css/style.styl b/grunt/css/style.styl index fc7022e..0a7438a 100644 --- a/grunt/css/style.styl +++ b/grunt/css/style.styl @@ -1,11 +1,14 @@ @import "ShortCSS/ShortCSS.styl" @import "normalize/normalize.styl" +/** sprite */ +@import "sprite.styl" /** ptest css */ body -ff _ffv -fs 16 + -wmin 320 $link_color = #0063ff $link_color_border = alpha($link_color,.3) @@ -28,12 +31,30 @@ a -c $link_hover_color -brbc $link_hover_color_border + &.to-front + -brb 0 none + -d block + -mt -5 + -mb 2em + line-height 1 + + &:visited + -c $link_color + + &:hover + &:visited:hover + -c $link_hover_color + .page &__container -wmax 800 -m 0 auto + +media('max-width:829px') + -wmax auto + -w 100% + .header -p 30 -bg #ffcc56 @@ -46,6 +67,14 @@ a -mb 60 -ta center + +media('max-width:829px') + bx-shadow none + -mt 0 + + +media('max-width:500px') + -p 20 + -mb 36 + &__title line-height 1 -m 0 @@ -54,18 +83,128 @@ a -ts 1 1 1 #a76f19 -fs 52 + +media('max-width:500px') + -fs 32 + .page-title -pb 35 + +media('max-width:500px') + -fs 1.35em + .content -pb 76 + +media('max-width:829px') + -w 90% + -m auto + + + p + -m 26 0 + -lh 24 + +.sort + -d table-row + +media('max-width:424px') + -ml -9 + + &__cell + -d table-cell + + &:first-child + +media('max-width:424px') + -d none + + &:nth-child(2) + +media('max-width:424px') + -pl 0 + + &+& + -pl 9 + + &>a + -brb 0 none + line-height 1 + + &:visited + -c $link_color + + &:hover + &:visited:hover + -c $link_hover_color + +article + &+article + -mt 64 + header + h2+span + +media('max-width:500px') + -d block + +.pager + -mt 50 + -ff _ffa + -lh 40 + -fs 20 + + +media('max-width:559px') + -fs 16 + -lh 36 + + &__page + -d inline-block + + &--current + cursor default + + &>a + -brb none + -c black + -p 8 12 + b-radius 35 + +media('max-width:559px') + -p 5 8 + + &:hover + -c black + -bgc $link_hover_color_border + + &>span + -bgc alpha(#dead6f,.5) + -p 8 12 + b-radius 35 + +media('max-width:559px') + -p 5 8 + + &--string + &:first-child + -mr 10 + +media('max-width:559px') + -mr 0 + + &:last-child + -ml 9 + +media('max-width:559px') + -ml 0 + + &>a + -p 8 0 + +media('max-width:559px') + -p 8 0 + + &:hover + //-c black + -bgc transparent + .footer -brt 1 solid #dead6f -pt 24 -fs 85% -c #232425 -pb 40 + +media('max-width:829px') + -pl 5% #CAPTCHA & > img @@ -77,6 +216,9 @@ a form -w 320 + +media('max-width:374px') + -w 100% + .form-element -m 0 -8 10 -8 -p 6 8 @@ -103,3 +245,35 @@ form &:focus -brb 2 solid $link_hover_color_border + +.i-user + sprite_sprite(sprite_account) + -mb -6 + -d inline-block + -mr 5 + -ml 1em + + +media('max-width:500px') + -ml 0 + +.i-homepage + sprite_sprite(sprite_web) + -mb -6 + -d inline-block + -mr 5 + +.i-date + sprite_sprite(sprite_calendar) + -mb -6 + -d inline-block + -mr 5 + +.i-email + sprite_sprite(sprite_email) + -mb -6 + -d inline-block + -mr 5 + + + +apply_media_cache() \ No newline at end of file diff --git a/grunt/images/sprite.png b/grunt/images/sprite.png new file mode 100644 index 0000000..9352cdb Binary files /dev/null and b/grunt/images/sprite.png differ diff --git a/grunt/images/sprite/account.png b/grunt/images/sprite/account.png new file mode 100644 index 0000000..086b752 Binary files /dev/null and b/grunt/images/sprite/account.png differ diff --git a/grunt/images/sprite/calendar.png b/grunt/images/sprite/calendar.png new file mode 100644 index 0000000..342bf91 Binary files /dev/null and b/grunt/images/sprite/calendar.png differ diff --git a/grunt/images/sprite/email.png b/grunt/images/sprite/email.png new file mode 100644 index 0000000..c3d29f0 Binary files /dev/null and b/grunt/images/sprite/email.png differ diff --git a/grunt/images/sprite/web.png b/grunt/images/sprite/web.png new file mode 100644 index 0000000..278963c Binary files /dev/null and b/grunt/images/sprite/web.png differ diff --git a/grunt/package.json b/grunt/package.json index 5199d4a..2731d7f 100644 --- a/grunt/package.json +++ b/grunt/package.json @@ -7,6 +7,8 @@ "grunt-contrib-stylus": "~1.2.0", "grunt-contrib-jshint": "~1.0.0", "grunt-contrib-internal": "~1.2.2", - "grunt-contrib-uglify": "~2.0.0" + "grunt-contrib-uglify": "~2.0.0", + "node-sprite-generator": "~0.10.2", + "grunt-contrib-imagemin": "~1.0.1" } } diff --git a/public/css/style.css b/public/css/style.css index 18af2c2..9161991 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1 @@ -html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template,[hidden]{display:none}body{font-family:Verdana,"Geneva CY","DejaVu Sans",sans-serif;font-size:16px}a{color:#0063ff;text-decoration:none;border-bottom:1px solid rgba(0,99,255,.3)}a:visited{color:#cf00cf;border-bottom-color:rgba(207,0,207,.3)}a:hover,a:visited:hover{color:#ff475d;border-bottom-color:rgba(255,71,93,.24)}.page__container{max-width:800px;margin:0 auto}.header{padding:30px;background:#ffcc56;background:-moz-repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);background:-webkit-repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);background:repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);-moz-box-shadow:2px 3px 15px #eb4 inset;-webkit-box-shadow:2px 3px 15px #eb4 inset;box-shadow:2px 3px 15px #eb4 inset;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-ms-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;margin-top:30px;margin-bottom:60px;text-align:center}.header__title{line-height:1;margin:0;font-family:"Times New Roman","Times CY","Nimbus Roman No9 L",serif;font-style:italic;text-shadow:1px 1px 1px #a76f19;font-size:52px}.page-title{padding-bottom:35px}.content{padding-bottom:76px}.footer{border-top:1px solid #dead6f;padding-top:24px;font-size:85%;color:#232425;padding-bottom:40px}#CAPTCHA>img{width:160px;height:60px;clear:both;display:block}form{width:320px}.form-element{margin:0 -8px 10px;padding:6px 8px}.form-element--error{background:#fee;background:-moz-repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),-moz-repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);background:-webkit-repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),-webkit-repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);background:repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif;font-size:15px;line-height:30px;font-weight:700;color:#111}.form-element__input,.form-element__textarea{width:100%;outline:none;border:0 none;border-bottom:2px solid rgba(0,99,255,.3);-webkit-transition:border-bottom .15s ease-out 0s;-moz-transition:border-bottom .15s ease-out 0s;-o-transition:border-bottom .15s ease-out 0s;transition:border-bottom .15s ease-out 0s;padding:4px 0}.form-element__input:focus,.form-element__textarea:focus{border-bottom:2px solid rgba(255,71,93,.24)} \ No newline at end of file +html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template,[hidden]{display:none}body{font-family:Verdana,"Geneva CY","DejaVu Sans",sans-serif;font-size:16px;min-width:320px}a{color:#0063ff;text-decoration:none;border-bottom:1px solid rgba(0,99,255,.3)}a:visited{color:#cf00cf;border-bottom-color:rgba(207,0,207,.3)}a:hover,a:visited:hover{color:#ff475d;border-bottom-color:rgba(255,71,93,.24)}a.to-front{border-bottom:0 none;display:block;margin-top:-5px;margin-bottom:2em;line-height:1}a.to-front:visited{color:#0063ff}a.to-front:hover,a.to-front:visited:hover{color:#ff475d}.page__container{max-width:800px;margin:0 auto}.header{padding:30px;background:#ffcc56;background:-moz-repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);background:-webkit-repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);background:repeating-linear-gradient(178deg,rgba(255,204,86,.5)8px,rgba(255,140,0,.5)18px);-moz-box-shadow:2px 3px 15px #eb4 inset;-webkit-box-shadow:2px 3px 15px #eb4 inset;box-shadow:2px 3px 15px #eb4 inset;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-ms-border-radius:2px;-khtml-border-radius:2px;border-radius:2px;margin-top:30px;margin-bottom:60px;text-align:center}.header__title{line-height:1;margin:0;font-family:"Times New Roman","Times CY","Nimbus Roman No9 L",serif;font-style:italic;text-shadow:1px 1px 1px #a76f19;font-size:52px}.page-title{padding-bottom:35px}.content{padding-bottom:76px}.content p{margin:26px 0;line-height:24px}.sort{display:table-row}.sort__cell{display:table-cell}.sort__cell+.sort__cell{padding-left:9px}.sort__cell>a{border-bottom:0 none;line-height:1}.sort__cell>a:visited{color:#0063ff}.sort__cell>a:hover,.sort__cell>a:visited:hover{color:#ff475d}article+article{margin-top:64px}.pager{margin-top:50px;font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif;line-height:40px;font-size:20px}.pager__page{display:inline-block}.pager__page--current{cursor:default}.pager__page>a{border-bottom:none;color:#000;padding:8px 12px;-webkit-border-radius:35px;-moz-border-radius:35px;-o-border-radius:35px;-ms-border-radius:35px;-khtml-border-radius:35px;border-radius:35px}.pager__page>a:hover{color:#000;background-color:rgba(255,71,93,.24)}.pager__page>span{background-color:rgba(222,173,111,.5);padding:8px 12px;-webkit-border-radius:35px;-moz-border-radius:35px;-o-border-radius:35px;-ms-border-radius:35px;-khtml-border-radius:35px;border-radius:35px}.pager__page--string:first-child{margin-right:10px}.pager__page--string:last-child{margin-left:9px}.pager__page--string>a{padding:8px 0}.pager__page--string>a:hover{background-color:transparent}.footer{border-top:1px solid #dead6f;padding-top:24px;font-size:85%;color:#232425;padding-bottom:40px}#CAPTCHA>img{width:160px;height:60px;clear:both;display:block}form{width:320px}.form-element{margin:0 -8px 10px;padding:6px 8px}.form-element--error{background:#fee;background:-moz-repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),-moz-repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);background:-webkit-repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),-webkit-repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);background:repeating-linear-gradient(-45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px),repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,0,0,.2)12px);font-family:Arial,"Helvetica CY","Nimbus Sans L",sans-serif;font-size:15px;line-height:30px;font-weight:700;color:#111}.form-element__input,.form-element__textarea{width:100%;outline:none;border:0 none;border-bottom:2px solid rgba(0,99,255,.3);-webkit-transition:border-bottom .15s ease-out 0s;-moz-transition:border-bottom .15s ease-out 0s;-o-transition:border-bottom .15s ease-out 0s;transition:border-bottom .15s ease-out 0s;padding:4px 0}.form-element__input:focus,.form-element__textarea:focus{border-bottom:2px solid rgba(255,71,93,.24)}.i-user{background-position:-2px -2px;margin-left:1em}.i-user,.i-homepage{background-image:url("/image/sprite.png");background-size:56px 56px;width:24px;height:24px;margin-bottom:-6px;display:inline-block;margin-right:5px}.i-homepage{background-position:-30px -30px}.i-date{background-position:-30px -2px}.i-date,.i-email{background-image:url("/image/sprite.png");background-size:56px 56px;width:24px;height:24px;margin-bottom:-6px;display:inline-block;margin-right:5px}.i-email{background-position:-2px -30px}@media only screen and (max-width:829px){.page__container{max-width:auto;width:100%}.header{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;margin-top:0}.content{width:90%;margin:auto}.footer{padding-left:5%}}@media only screen and (max-width:500px){.header{padding:20px;margin-bottom:36px}.header__title{font-size:32px}.page-title{font-size:1.35em}article header h2+span{display:block}.i-user{margin-left:0}}@media only screen and (max-width:424px){.sort{margin-left:-9px}.sort__cell:first-child{display:none}.sort__cell:nth-child(2){padding-left:0}}@media only screen and (max-width:559px){.pager{font-size:16px;line-height:36px}.pager__page>a,.pager__page>span{padding:5px 8px}.pager__page--string:first-child{margin-right:0}.pager__page--string:last-child{margin-left:0}.pager__page--string>a{padding:8px 0}}@media only screen and (max-width:374px){form{width:100%}} \ No newline at end of file diff --git a/public/css/style.raw.css b/public/css/style.raw.css index 4a60126..2c36c88 100644 --- a/public/css/style.raw.css +++ b/public/css/style.raw.css @@ -195,10 +195,12 @@ template { [hidden] { display: none; } +/** sprite */ /** ptest css */ body { font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif; font-size: 16px; + min-width: 320px; } a { color: #0063ff; @@ -214,6 +216,20 @@ a:visited:hover { color: #ff475d; border-bottom-color: rgba(255,71,93,0.24); } +a.to-front { + border-bottom: 0 none; + display: block; + margin-top: -5px; + margin-bottom: 2em; + line-height: 1; +} +a.to-front:visited { + color: #0063ff; +} +a.to-front:hover, +a.to-front:visited:hover { + color: #ff475d; +} .page__container { max-width: 800px; margin: 0 auto; @@ -251,6 +267,82 @@ a:visited:hover { .content { padding-bottom: 76px; } +.content p { + margin: 26px 0; + line-height: 24px; +} +.sort { + display: table-row; +} +.sort__cell { + display: table-cell; +} +.sort__cell+.sort__cell { + padding-left: 9px; +} +.sort__cell>a { + border-bottom: 0 none; + line-height: 1; +} +.sort__cell>a:visited { + color: #0063ff; +} +.sort__cell>a:hover, +.sort__cell>a:visited:hover { + color: #ff475d; +} +article+article { + margin-top: 64px; +} +.pager { + margin-top: 50px; + font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; + line-height: 40px; + font-size: 20px; +} +.pager__page { + display: inline-block; +} +.pager__page--current { + cursor: default; +} +.pager__page>a { + border-bottom: none; + color: #000; + padding: 8px 12px; + -webkit-border-radius: 35px; + -moz-border-radius: 35px; + -o-border-radius: 35px; + -ms-border-radius: 35px; + -khtml-border-radius: 35px; + border-radius: 35px; +} +.pager__page>a:hover { + color: #000; + background-color: rgba(255,71,93,0.24); +} +.pager__page>span { + background-color: rgba(222,173,111,0.5); + padding: 8px 12px; + -webkit-border-radius: 35px; + -moz-border-radius: 35px; + -o-border-radius: 35px; + -ms-border-radius: 35px; + -khtml-border-radius: 35px; + border-radius: 35px; +} +.pager__page--string:first-child { + margin-right: 10px; +} +.pager__page--string:last-child { + margin-left: 9px; +} +.pager__page--string>a { + padding: 8px 0; +} +.pager__page--string>a:hover { + background-color: transparent; +} .footer { border-top: 1px solid #dead6f; padding-top: 24px; @@ -298,3 +390,118 @@ form { .form-element__textarea:focus { border-bottom: 2px solid rgba(255,71,93,0.24); } +.i-user { + background-image: url("/image/sprite.png"); + background-size: 56px 56px; + background-position: -2px -2px; + width: 24px; + height: 24px; + margin-bottom: -6px; + display: inline-block; + margin-right: 5px; + margin-left: 1em; +} +.i-homepage { + background-image: url("/image/sprite.png"); + background-size: 56px 56px; + background-position: -30px -30px; + width: 24px; + height: 24px; + margin-bottom: -6px; + display: inline-block; + margin-right: 5px; +} +.i-date { + background-image: url("/image/sprite.png"); + background-size: 56px 56px; + background-position: -30px -2px; + width: 24px; + height: 24px; + margin-bottom: -6px; + display: inline-block; + margin-right: 5px; +} +.i-email { + background-image: url("/image/sprite.png"); + background-size: 56px 56px; + background-position: -2px -30px; + width: 24px; + height: 24px; + margin-bottom: -6px; + display: inline-block; + margin-right: 5px; +} +@media only screen and (max-width: 829px) { + .page__container { + max-width: auto; + width: 100%; + } + .header { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; + margin-top: 0; + } + .content { + width: 90%; + margin: auto; + } + .footer { + padding-left: 5%; + } +} +@media only screen and (max-width: 500px) { + .header { + padding: 20px; + margin-bottom: 36px; + } + .header__title { + font-size: 32px; + } + .page-title { + font-size: 1.35em; + } + article header h2+span { + display: block; + } + .i-user { + margin-left: 0; + } +} +@media only screen and (max-width: 424px) { + .sort { + margin-left: -9px; + } + .sort__cell:first-child { + display: none; + } + .sort__cell:nth-child(2) { + padding-left: 0; + } +} +@media only screen and (max-width: 559px) { + .pager { + font-size: 16px; + line-height: 36px; + } + .pager__page>a { + padding: 5px 8px; + } + .pager__page>span { + padding: 5px 8px; + } + .pager__page--string:first-child { + margin-right: 0; + } + .pager__page--string:last-child { + margin-left: 0; + } + .pager__page--string>a { + padding: 8px 0; + } +} +@media only screen and (max-width: 374px) { + form { + width: 100%; + } +} diff --git a/public/image/sprite.png b/public/image/sprite.png new file mode 100644 index 0000000..975f2c9 Binary files /dev/null and b/public/image/sprite.png differ diff --git a/src/C/IndexController.php b/src/C/IndexController.php index 491c4a8..5e071b7 100644 --- a/src/C/IndexController.php +++ b/src/C/IndexController.php @@ -16,14 +16,44 @@ use PTEST\M\CAPTCHAModel; class IndexController extends Controller { - public function indexAction() { + public function indexAction( $number=1 ) { $view = new View('index'); $view->page_title = "Доска объявлений"; + $model = new Model(); + $view->pages_count = $model->countPages(); + $view->current_page = $number; + $model = null; + $view->sort_by = 'date'; + $view->sort_order = 'asc'; + $view->ads = Model::getForPage( (int) $number ); $view->render(); } - public function pageAction( $number ) { + public function sortAction( $column, $order ,$number=1 ) { + $view = new View('index'); + $view->page_title = "Доска объявлений"; + $model = new Model(); + $view->pages_count = $model->countPages(); + $view->current_page = $number; + $model = null; + $view->sort_by = $column; + $view->sort_order = $order; + if ($column=='date')$column='pdate'; + if ($column=='user')$column='username'; + if ($column=='mail')$column='email'; + $view->ads = Model::getForPage( (int) $number, $column, $order); + $view->render(); + } + public function fullAction( $number ) { + $model = Model::findFirst( 'id = '. $number ); + if ( ! $model ) { + $this->app->routeRun('error404'); + } + $view = new View('full'); + $view->ad = $model; + $model = null; + $view->render(); } public function newAction() { diff --git a/src/M/AdModel.php b/src/M/AdModel.php index 1d043b1..f6f861c 100644 --- a/src/M/AdModel.php +++ b/src/M/AdModel.php @@ -28,6 +28,13 @@ class AdModel extends Model{ protected $table_pdate; + /** + * @return mixed + */ + public function getId() { + return (int) $this->table_id; + } + /** * @param $username * @@ -74,7 +81,7 @@ class AdModel extends Model{ */ public function setHomepage( $homepage ) { if ( preg_match('|https?://.*\..*|i', $homepage ) ) { - $this->table_homepage = $homepage; + $this->table_homepage = strip_tags( $homepage ); return true; } else { return "Введите коректный адрес"; @@ -143,4 +150,21 @@ class AdModel extends Model{ public function getDate() { return $this->table_pdate; } + + public function countPages() { + return ceil($this->count()/25); + } + + /** + * @param int $page_number + * @param string $sort_by + * @param string $order + * + * @return mixed + */ + static public function getForPage( $page_number = 1, $sort_by = 'pdate', $order = 'ASC' ) { + $class_name = __CLASS__; + $offset = ($page_number - 1) * 25; + return $class_name::find(" 1 ORDER BY $sort_by $order LIMIT $offset,25"); + } } \ No newline at end of file diff --git a/src/V/404.php b/src/V/404.php index 895163d..3323ced 100644 --- a/src/V/404.php +++ b/src/V/404.php @@ -7,10 +7,8 @@ require __DIR__ . '/inc/head.php'; $this->content = <<

$this->page_title

-

К сожению, страница не найдена.

Попробуйте проследовать на главную. -

HTML; diff --git a/src/V/full.php b/src/V/full.php new file mode 100644 index 0000000..0ae706b --- /dev/null +++ b/src/V/full.php @@ -0,0 +1,32 @@ +(\s*)?
/','

',str_replace(["\n"],['
'], preg_replace("/[\t\ ]{2,}/",' ',$t))) ); }; +$this->page_title = 'Объявление №'.$this->ad->getId().' '.$h1($this->ad->getText()); + +require __DIR__ . '/inc/head.php'; + +ob_start(); +?> +

+

page_title; ?>

+ ←Главная +
+
+ ad->getDate(); ?> + ad->getUserName(); ?>
+ ad->getEmail()); ?> + ad->getHomepage() ) ) { + echo '
' . $this->ad->getHomepage() . ''; + } + ?> +
+
+

ad->getText() ); ?> +

+ content = ob_get_contents(); +ob_end_clean(); + +require __DIR__ . '/inc/body.php'; \ No newline at end of file diff --git a/src/V/inc/body.php b/src/V/inc/body.php index 3aa48be..e5e510a 100644 --- a/src/V/inc/body.php +++ b/src/V/inc/body.php @@ -3,7 +3,7 @@

site_name; ?>

-
+
content; ?>