Simplify the main form and the architecture

6f848150 · kaiyou · b2cb7ad7 · 6f848150 · 6f848150 · 6f848150
Commit 6f848150 authored Dec 06, 2015 by kaiyou
6 changed files
--- a/gulpfile.js
+++ b/gulpfile.js
 var gulp = require('gulp'), 
-    sass = require('gulp-ruby-sass') 
-    notify = require("gulp-notify") 
-    bower = require('gulp-bower');
+    bower = require('gulp-bower'),
+    replace = require('gulp-replace'),
+    concat = require('gulp-concat');

 var config = {
      srcPath: './resources',
@@ -9,20 +9,34 @@ var config = {
    dstPath: './tedimg/static'
 }

-var cssPath = [
-    config.srcPath,
-    config.bowerDir + '/Materialize/sass',
-]
-
 gulp.task('bower', function() { 
    return bower()
      .pipe(gulp.dest(config.bowerDir)) 
 });

 gulp.task('styles', function () {
-    return sass(config.srcPath + '/main.scss', {loadPath: cssPath})
-    .on('error', sass.logError)
-    .pipe(gulp.dest(config.dstPath))
+    return gulp.src([
+        config.bowerDir + '/*/dist/css/*.min.css',
+        config.srcPath + '/main.css'
+      ])
+      .pipe(concat('main.css'))
+      .pipe(replace("/font/", "/static/font/"))
+      .pipe(gulp.dest(config.dstPath))
+});
+
+gulp.task('scripts', function() {
+    return gulp.src([
+        config.bowerDir + '/jquery/dist/jquery.min.js',
+        config.bowerDir + '/Materialize/dist/js/materialize.min.js',
+        config.srcPath + '/*.js'
+      ])
+      .pipe(concat('main.js'))
+      .pipe(gulp.dest(config.dstPath))
+});
+
+gulp.task('copy', function() {
+    return gulp.src(config.bowerDir + '/Materialize/dist/font/**/*')
+    .pipe(gulp.dest(config.dstPath + '/font'));
 });

-  gulp.task('default', ['bower', 'styles']);
+  gulp.task('default', ['bower', 'styles', 'copy', 'scripts']);
--- a/package.json
+++ b/package.json
 {
  "name": "tedimg",
-  "dependencies": {},
+  "dependencies": {
+    "gulp-concat": "^2.6.0",
+    "gulp-replace": "^0.5.4",
+  },
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-bower": "0.0.11",
    "gulp-notify": "^2.2.0",
-    "gulp-ruby-sass": "^2.0.6"
  }
 }
--- a/resources/main.scss
+++ b/resources/main.scss
-@import "materialize";
-
-
 /* Browser specific (not valid) styles to make preformatted text wrap */

 pre {

--- a/resources/main.js
+++ b/resources/main.js
+$(document).ready(function() {
+
+  $("form#upload input").change(function() {
+    $("form#upload").submit();
+  });
+
+});
--- a/tedimg/templates/base.html
+++ b/tedimg/templates/base.html
@@ -5,6 +5,8 @@
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>{{ config["SITE_NAME"] }}</title>
  <link href="/static/main.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="/static/main.js"></script>
 </head>
 <body>
  <nav class="blue" role="navigation">
@@ -22,7 +24,7 @@
  <footer class="page-footer blue">
    <div class="footer-copyright">
      <div class="container">
-      Made with love using Python, JS, Flask, Gulp, Bower, and Materialize
+      Made with love using Flask
      </div>
    </div>
  </footer>

--- a/tedimg/templates/index.html
+++ b/tedimg/templates/index.html
@@ -2,21 +2,20 @@

 {% block banner_content %}
 <h1 class="header center orange-text">Upload your image!</h1>
-<form action="#">
+<form id="upload" action="#">
  <div class="file-field input-field">
    <div class="btn light-blue">
      <span>File</span>
-      <input type="file" multiple>
+      <input type="file">
    </div>
    <div class="file-path-wrapper">
-      <input class="file-path validate" type="text" placeholder="Upload one or more image">
+      <input class="file-path validate" type="text" placeholder="Upload your image">
    </div>
  </div>

  <div class="input-field">
-      <i class="material-icons prefix">label</i>
-      <input id="icon_prefix" type="text" class="validate">
-      <label for="icon_prefix">http:// or paste your image URL</label>
+      <i class="material-icons prefix">public</i>
+      <input id="icon_prefix" type="text" class="validate" placeholder="Or paste your url">
  </div>
 </form>
 {% endblock %}