diff --git a/.gitignore b/.gitignore index 1398799..fbd875f 100644 --- a/.gitignore +++ b/.gitignore @@ -41,3 +41,10 @@ nosetests.xml # we shoudnt need venv in git venv/ .tox + +# JS +node_modules/ +bower_components/ +dist/ + +settings.json diff --git a/Changelog.md b/Changelog.md new file mode 100644 index 0000000..3b6310f --- /dev/null +++ b/Changelog.md @@ -0,0 +1,12 @@ +# Change Log + +## [0.1](https://github.com/skywinder/github-changelog-generator/tree/0.1) (2015-09-17) + +Saltpad has been entirely rewritten as a single app page using React. This leads to several enhancements: + +- Better responsiveness. +- More interactive. +- Helps solves the job launching UX. +- Easier to deploy. + +This rewrite and architecture change now require that the salt-api is contactable from the browser directly. If it's a concern for you and don't want to use the new version because of it, please open an issue. diff --git a/MANIFEST.in b/MANIFEST.in deleted file mode 100644 index 3b122c1..0000000 --- a/MANIFEST.in +++ /dev/null @@ -1,10 +0,0 @@ -include AUTHORS.rst -include CONTRIBUTING.rst -include HISTORY.rst -include LICENSE -include README.rst -include requirements.txt -include windows-requirements.txt -include _requirements.txt -graft saltpad - diff --git a/Makefile b/Makefile deleted file mode 100644 index 4de21a9..0000000 --- a/Makefile +++ /dev/null @@ -1,57 +0,0 @@ -.PHONY: clean-pyc clean-build docs clean - -help: - @echo "clean-build - remove build artifacts" - @echo "clean-pyc - remove Python file artifacts" - @echo "lint - check style with flake8" - @echo "test - run tests quickly with the default Python" - @echo "test-all - run tests on every Python version with tox" - @echo "coverage - check code coverage quickly with the default Python" - @echo "docs - generate Sphinx HTML documentation, including API docs" - @echo "release - package and upload a release" - @echo "sdist - package" - -clean: clean-build clean-pyc - rm -fr htmlcov/ - -clean-build: - rm -fr build/ - rm -fr dist/ - rm -fr *.egg-info - -clean-pyc: - find . -name '*.pyc' -exec rm -f {} + - find . -name '*.pyo' -exec rm -f {} + - find . -name '*~' -exec rm -f {} + - -lint: - flake8 saltpad tests - -test: - python setup.py test - -test-all: - tox - -coverage: - coverage run --source saltpad setup.py test - coverage report -m - coverage html - open htmlcov/index.html - -docs: - rm -f docs/saltpad.rst - rm -f docs/modules.rst - sphinx-apidoc -o docs/ saltpad - $(MAKE) -C docs clean - $(MAKE) -C docs html - open docs/_build/html/index.html - -release: clean - python setup.py sdist upload - python setup.py bdist_wheel upload - -dist: clean - python setup.py sdist - python setup.py bdist_wheel - ls -l dist \ No newline at end of file diff --git a/README.rst b/README.rst index b677ea0..d5aa047 100644 --- a/README.rst +++ b/README.rst @@ -3,82 +3,43 @@ What is SaltPad? =============================== -SaltPad is a GUI tool to manage SaltStack deployments + orchestration. It's still very young and it's should be considered as Alpha. +SaltPad is a GUI tool to manage SaltStack deployments + orchestration. It's still very young and it should be considered as Alpha. .. image:: screenshots/highstate_result.png -A walkthrough using screenshots is available in the screenshots directory. +A walkthrough using screenshots is available in the screenshots directory (not up-to-date). + +**This version of saltpad is a full-rewrite as a single app page. The old version in python is still available in the `saltpad_v1 branch`_. If you cannot use this version, please open an issue to ease migration and see Changelog_.** SaltPad compatibility ===================== -SaltPad is mainly coded in Python and is compatible with python2.X and python3.4. +SaltPad is mainly coded in Javascript and should be compatible with all modern browsers. -SaltPad communicate with Salt through the salt-api. The salt-api format / specification is not stable, for now so SaltPad could only provides limited compatibility with salt-api. The salt-api format depends on 3 variables, salt version, the netapi used (cherrypy or tornado) and the master_job_cache used for storing and retrieving jobs results. We aim to provide maximum compatibility with the most frequent combinaison but while the format is not clearly specified, each combinaison would require an huge amount of work. Here is the compatibility table to quickly see if your configuration is supported or not: +SaltPad communicate with Salt through the salt-api and thus requires access to the salt-api from the browser. If it's an issue, please drop a comment on [this issue](http://github.com/tinyclues/saltpad) to discuss the possible solutions. The salt-api format / specification is not stable, for now so SaltPad could only provide limited compatibility with salt-api. The salt-api format depends on 3 variables, salt version, the netapi used (cherrypy or tornado) and the master_job_cache used for storing and retrieving jobs results. SaltPad required some upgrade on salt-api side (for CORS support mainly) and will only work with a dev version +--------------+---------------+------------------+------------+-----------------------------------+ | Salt Version | Netapi | Master_job_cache | Supported? | Issue if not supported | +--------------+---------------+------------------+------------+-----------------------------------+ -| 2014.7.X | * | * | NO | Format incompatible with 2015.5.X | -+--------------+---------------+------------------+------------+-----------------------------------+ -| 2015.5.2 | rest_cherrypy | local (default) | YES | | +| 2014.8.dev | rest_tornado | * (all) | YES | | +--------------+---------------+------------------+------------+-----------------------------------+ -Here is the list of issues about the salt-api format standardisation that would make the saltpad job much much easier: +Here is the list of issues about the salt-api format standardization that would make the saltpad job much much easier: * https://github.com/saltstack/salt/issues/23131 -* https://github.com/saltstack/salt/issues/22713 * https://github.com/saltstack/salt/issues/19018 * https://github.com/saltstack/salt/issues/13698 Installation ============ -SaltPad is not yet available on Pypi, so you can clone it here: git@github.com:tinyclues/saltpad.git. - -.. code-block:: bash - - git clone git@github.com:tinyclues/saltpad.git - -The recommended way to install saltpad is to create a dedicated virtualenv to isolate saltpad's dependencies from the system one (https://pypi.python.org/pypi/virtualenv/): - -.. code-block:: bash - - cd saltpad - virtualenv venv - -On you create the virtualenv, you should see in the beginning of your terminal "(venv)", it means the virtualenv has been activated and that you will use the local python and local python packages. If "(venv)" is not printed, try running this command: - -.. code-block:: bash - - source venv/bin/activate - -Once you are in your virtualenv, you can now install all the dependencies, for easing the copy/paste, I omit the "(venv)"" in the start of the line: - - pip install -r requirements.txt - -You're now ready to configure the salt-api, saltpad and starting playing with it! Please be sure to follow the next part of the Readme or you will not be able to connect to the salt-api. - -Werkzeug dependency -------------------- - -There is known issues with werkzeug: - -- On windows platform, it raises strange errors about `_winreg` module, it's a known issue solved in the six project (https://bitbucket.org/gutworth/six/issue/99/six-and-inspect-importerror-_winreg-module) but not available right now. The fix is to use werkzeug version 0.9.4. -- On all platforms, werkzeug fails with python version 2.7.7, see https://github.com/mitsuhiko/werkzeug/issues/537. The fix is to use werkzeug version 0.9.6 and superior. - -Due to this two conflictings problems, we can't fix the minimal werkzeug version and need to wait for the six release. - -SaltPad Web GUI configuration -============================= - -The Web GUI uses the HTTP Api of SaltStack to interract with the Salt-Master. You should first install the Salt-Api on your Salt-Master. You can find the documentation in the `SaltStack documentation`_. - -If you just want to test SaltPad, you can use the Vagrantfile provided in vagrant directory. Just follow README in the same repository and have fun! +You have several solutions to install saltpad, but before installing saltpad, you need to install and configure salt-api. Install salt-api ---------------- +The Web GUI uses the HTTP Api of SaltStack to interact with the Salt-Master. You should first install the Salt-Api on your Salt-Master. You can find the documentation in the `SaltStack documentation`_. + The Salt-Api project has been merged into SaltStack in release 2014.7.0, so you can use the salt-api with SaltStack 2014.7.0 release or install salt-api with previous releases, you can install it using pip: .. code:: bash @@ -91,14 +52,16 @@ Or if you're using a Debian-derived linux: sudo apt-get install salt-api -The salt-api requires some configuration too. Salt-api supports multiple implementation, but the rest_cherrypy implementation is the more mature and the recommended one when using saltpad. If you want to run salt-api and saltpad on the same host, you can configuration salt-api as followed in the file /etc/salt/master: +The salt-api requires some configuration too. Salt-api supports multiple implementation, but the rest_tornado implementation is the more mature and the recommended one when using saltpad. If you want to run salt-api and saltpad on the same host, you can configuration salt-api as followed in the file /etc/salt/master: .. code:: yaml - rest_cherrypy: + rest_tornado: port: 8000 host: 127.0.0.1 disable_ssl: true + websockets: True + cors_origin: '*' Warning, this configuration disable ssl as it only listens to localhost, if you want to expose the salt-api to the network, you should really deploy it behind nginx with ssl, do not change the host to 0.0.0.0 without ssl! @@ -108,14 +71,18 @@ Then you can launch the API using the following command: .. code:: bash - salt-api -d + sudo /etc/init.d/salt-api restart + +Or if you want to launch salt-api by hand. + +.. code:: bash -Or using a wsgi server, see the doc for more informations. + salt-api -Configure authentication ------------------------- +Configure salt-api authentication +--------------------------------- -You'll also need to `configure the external auth`_ in your salt master. For example in master config: +You will also need to `configure the external auth`_ in your salt master. For example in master config: .. code-block:: bash @@ -126,79 +93,184 @@ You'll also need to `configure the external auth`_ in your salt master. For exam - '@runner' - '@wheel' -Currently SaltPad requires exactly these permissions, for various reasons. There is ongoing improvements on SaltStack part and in Saltpad to need less permissions. Saltpad will not allow you to connect if you don't have this set of permissions and will show you an error message. +Currently SaltPad requires exactly these permissions, for various reasons. There is ongoing improvements on SaltStack part and in Saltpad to require less permissions. Saltpad will not allow you to connect if you don't have this set of permissions and will show you an error message. + + +Check salt-api configuration +---------------------------- + +You can check you salt-api installation and configuration with this command on the salt-api host: + + +.. code-block:: bash + curl -i -H accept=application/json -d username=USER -d password=PASSWORD -d eauth=pam http://localhost:8000/login + + +In case of successful login you should have the response body that looks like that: + +.. code-block:: bash + {"return": [{"perms": [".*", "@runner", "@wheel"], "start": 1431010274.426576, "token": "70604a26facfe2aa14038b9abf37b639c32902bd", "expire": 1431053474.426576, "user": "salt", "eauth": "pam"}]} + +If the output includes "HTTP/1.1 401 Unauthorized", double-check the salt-api config in salt-master config file. + +SaltPad Web GUI configuration +============================= + +If you just want to test SaltPad, you can use the Vagrantfile provided in vagrant directory. Just follow README in the same repository and have fun! Configure SaltPad ----------------- If your checklist is done, you can now configure SaltPad. -Get into the saltpad directory, copy the file named "local_settings.sample.py" as "local_settings.py". You'll need to edit it. Set your API_URL if your salt-master is not local and generate a secret key if you want to avoid to reconnect each time your restart SaltPad. +Get into the saltpad directory, copy the file named "settings.json.sample" as "settings.py". You will need to edit it. Set your API_URL if your salt-master is not local and if your salt-api is served over SSL, set the SECURE_HTTP key to `true`. You can also configure job templates in this file, see the corresponding part for more details. You will need to strip comments from the file. + +Here is an example of a settings.json file: + +.. code-block:: json + + { + "API_URL": "localhost:8050", + "SECURE_HTTP": false, + "templates": { + "basic": { + "description": "Basic template", + "matcher": "glob", + "target": "*", + "moduleFunction": "test.fib", + "arguments": { + "num": 10 + } + }, + + "version": { + "description": "Basic version", + "matcher": "glob", + "target": "Celeste", + "moduleFunction": "test.version", + "arguments": {} + } + } + } -Launch SaltPad --------------- +Job templates +------------- -For testing purpose -___________________ +Job templates are now defined in the configuration file directly instead of storing them in salt master configuration file. They're are stored under the "templates" key and their format are the following: -When you just want to test saltpad in a local non-production environment, you can use the embedded webserver but be aware that this solution is not suitable for production environment with multiple users and where encryption is mandatory. You can start SaltPad with this command, note that you should be in the saltpad directory: +.. code-block:: json -.. code:: bash + "basic": { # Template name + "description": "Basic template", # Template description + "matcher": "glob", # Matcher, one of salt matcher (see salt --help, Target Options) + "target": "*", # The target + "moduleFunction": "test.fib", # Which function + "arguments": { # The function arguments + "num": 10 + } + } - / $> python run.py - * Running on http://127.0.0.1:5000/ - * Restarting with reloader +You can add as many templates as you want, but they need to have distinct name. -Now go on http://127.0.0.1:5000 in your browser, login using SaltStack external auth and enjoy! -In production environment -_________________________ +Install saltpad for production +------------------------------ -You should deploy saltpad using a wsgi server behind a real webserver like nginx or haproxy. +You can install a release version of saltpad on a web server with nginx or apache to serve it. -For example you can use chaussette (https://chaussette.readthedocs.org/en/latest/) to launch saltpad. In the saltpad repository root: +Releases versions are available on github (https://github.com/tinyclues/saltpad/releases). Download the distribution zip: -.. code:: bash +.. code-block:: bash + + wget https://github.com/tinyclues/saltpad/releases/0.1/dist.zip - saltpad/ $> chaussette saltpad.app:app - 2015-04-05 12:34:04 [58304] [INFO] Application is - 2015-04-05 12:34:04 [58304] [INFO] Serving on localhost:8080 - 2015-04-05 12:34:04 [58304] [INFO] Using as a backend +Unzip it on your webserver where you want: -You can also serve the wsgi app with the wsgi server of your choice. The wsgi path is "saltpad.app:app" and you should launch the wsgi server in the root of this repository. +.. code-block:: bash -Now configure your favorite webserver to listen on the port 443 with tls enabled. For example with nginx: + cp dist.zip /opt/saltpad + cd /opt/saltpad + unzip dist.zip +You also need to create the file settings.json in the same directory, the filename will be /opt/saltpad/settings.json. You can use the file settings.json.sample as a base. -.. code:: +Then point your favorite webserver on the directory. For example, for an unsecured (HTTP) saltpad install with nginx, the configuration will be: - http { - server { - listen 443 ssl; - server_name YOURDNS.EXTENSION; - ssl_certificate /etc/pki/tls/certs/wildcard.saltpad.net.crt; - ssl_certificate_key /etc/pki/tls/certs/wildcard.saltpad.net.pem; +.. code-block:: nginx - location / { - proxy_pass http://localhost:8080/; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header Host $http_host; - proxy_set_header X-Real-IP $remote_addr; - } + server { + listen 80 default_server; + listen [::]:80 default_server ipv6only=on; + + root /opt/saltpad/; + index index.html; + + server_name SALTPAD.YOURDNS; + + location / { + try_files $uri /index.html; } } -Be sure to change the server_name and check that your ssl certificate paths are corrects. +Warning, this nginx configuration IS NOT SUITABLE for production, for configuring a ssl enabled site with nginx or apache, you can use the excellent `Mozilla SSL Configuration Generator`_. Configuring a website in a secure manner is a job by itself, please ask the more qualified person to do it. + +You can put this configuration and replace the content of the file "/etc/nginx/sites-enabled/default" or ask your system administrator to configure Nginx or Apache. + +Now reload the webserver: + +.. code-block:: bash + + sudo /etc/init.d/nginx reload + +And now, saltpad should be available on the web server, you can check with this command: + +.. code-block:: bash + + curl http://localhost + +The output should look like: + +.. code-block:: + + + + + + SaltPad + + +
+ + + +There is a beginning of deployment formula located here (https://github.com/tinyclues/saltpad/blob/saltpad_v2/vagrant/salt/roots/salt/saltpad.sls), I still try to make the cleanest integration possible with the nginx-formula (https://github.com/saltstack-formulas/nginx-formula). + +Hack on saltpad +--------------- + +If you want to hack on saltpad and start the dev environment, go on the repository root and launch these commands: + +.. code-block:: sh + + npm install # install javascript dependencies + ./node_modules/bower/bin/bower install # install browser dependencies + cp settings.json.sample settings.json + +You can now launch the dev environment: + +.. code-block:: sh + + npm start -Then restart nginx, go to https://YOURDNS.EXTENSION/ and enjoy! +SaltPad will be available on localhost:3333(localhost:3333). Features -------- -* Get overview of all your minions. +* Get overview of all your minion. * Get details about each minions, its Salt version. * Easy launch of state.highstate jobs with or without dry-run mode. -* Manage minions keys. +* Manage minion keys. * Launch jobs. * Access jobs details easily. * Save job configuration as templates and launch them with one click on a button. @@ -206,9 +278,11 @@ Features .. _SaltStack documentation: http://docs.saltstack.com/en/latest/ref/netapi/all/salt.netapi.rest_cherrypy.html .. _configure the external auth: http://docs.saltstack.com/en/latest/topics/eauth/index.html +.. _saltpad_v1 branch: https://github.com/tinyclues/saltpad/tree/saltpad_v1 +.. _Mozilla SSL Configuration Generator: https://mozilla.github.io/server-side-tls/ssl-config-generator/ +.. _Changelog: https://github.com/tinyclues/saltpad/Changelog.md Known issues ------------ * When getting single job output, SaltStack render it even if it's not necessary. This can cause severe slowdown and so slow the interface. It's a known issue in SaltStack (https://github.com/saltstack/salt/issues/18518) and it's should be solved in next release. If it's a problem, you can comment this line https://github.com/saltstack/salt/blob/v2014.7.0/salt/runners/jobs.py#L102 and this line https://github.com/saltstack/salt/blob/v2014.7.0/salt/runners/jobs.py#L81 in your salt master to speed up the job retrieval system. -* In 2015.5.X version, the job result miss some important informations like the arguments of the job, the target of the job and the target-type (glob, compound...) making job result page less usefull and making the redo-job button unusable. See this issue in SatlStack (https://github.com/saltstack/salt/issues/21496#event-339068972). diff --git a/_requirements.txt b/_requirements.txt deleted file mode 100644 index a8afaee..0000000 --- a/_requirements.txt +++ /dev/null @@ -1,7 +0,0 @@ -wheel==0.22.0 -jinja2 -flask -flask-wtf -requests -pymongo -six diff --git a/app/assets/css/style-responsive.css b/app/assets/css/style-responsive.css new file mode 100644 index 0000000..f599345 --- /dev/null +++ b/app/assets/css/style-responsive.css @@ -0,0 +1,295 @@ +@media (min-width: 980px) { + /*-----*/ + .custom-bar-chart { + margin-bottom: 40px; + } + +} + +@media (min-width: 768px) and (max-width: 979px) { + + /*-----*/ + .custom-bar-chart { + margin-bottom: 40px; + } + + /*chat room*/ + + +} + +@media (max-width: 768px) { + + .header { + position: absolute; + } + + /*sidebar*/ + + #sidebar { + height: auto; + overflow: hidden; + position: absolute; + width: 100%; + z-index: 1001; + } + + + /* body container */ + #main-content { + margin: 0px!important; + position: none !important; + } + + #sidebar > ul > li > a > span { + line-height: 35px; + } + + #sidebar > ul > li { + margin: 0 10px 5px 10px; + } + #sidebar > ul > li > a { + height:35px; + line-height:35px; + padding: 0 10px; + text-align: left; + } + #sidebar > ul > li > a i{ + /*display: none !important;*/ + } + + #sidebar ul > li > a .arrow, #sidebar > ul > li > a .arrow.open { + margin-right: 10px; + margin-top: 15px; + } + + #sidebar ul > li.active > a .arrow, #sidebar ul > li > a:hover .arrow, #sidebar ul > li > a:focus .arrow, + #sidebar > ul > li.active > a .arrow.open, #sidebar > ul > li > a:hover .arrow.open, #sidebar > ul > li > a:focus .arrow.open{ + margin-top: 15px; + } + + #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li { + width: 100%; + } + #sidebar > ul > li > ul.sub > li > a { + background: transparent !important ; + } + #sidebar > ul > li > ul.sub > li > a:hover { + + } + + + /* sidebar */ + #sidebar { + margin: 0px !important; + } + + /* sidebar collabler */ + #sidebar .btn-navbar.collapsed .arrow { + display: none; + } + + #sidebar .btn-navbar .arrow { + position: absolute; + right: 35px; + width: 0; + height: 0; + top:48px; + border-bottom: 15px solid #282e36; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + } + + + /*---------*/ + + .modal-footer .btn { + margin-bottom: 0px !important; + } + + .btn { + margin-bottom: 5px; + } + + + /* full calendar fix */ + .fc-header-right { + left:25px; + position: absolute; + } + + .fc-header-left .fc-button { + margin: 0px !important; + top: -10px !important; + } + + .fc-header-right .fc-button { + margin: 0px !important; + top: -50px !important; + } + + .fc-state-active, .fc-state-active .fc-button-inner, .fc-state-hover, .fc-state-hover .fc-button-inner { + background: none !important; + color: #FFFFFF !important; + } + + .fc-state-default, .fc-state-default .fc-button-inner { + background: none !important; + } + + .fc-button { + border: none !important; + margin-right: 2px; + } + + .fc-view { + top: 0px !important; + } + + .fc-button .fc-button-inner { + margin: 0px !important; + padding: 2px !important; + border: none !important; + margin-right: 2px !important; + background-color: #fafafa !important; + background-image: -moz-linear-gradient(top, #fafafa, #efefef) !important; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#efefef)) !important; + background-image: -webkit-linear-gradient(top, #fafafa, #efefef) !important; + background-image: -o-linear-gradient(top, #fafafa, #efefef) !important; + background-image: linear-gradient(to bottom, #fafafa, #efefef) !important; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fafafa', endColorstr='#efefef', GradientType=0) !important; + -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important; + -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important; + box-shadow: 0 1px 0px rgba(255, 255, 255, .8) !important; + -webkit-border-radius: 3px !important; + -moz-border-radius: 3px !important; + border-radius: 3px !important; + color: #646464 !important; + border: 1px solid #ddd !important; + text-shadow: 0 1px 0px rgba(255, 255, 255, .6) !important; + text-align: center; + } + + .fc-button.fc-state-disabled .fc-button-inner { + color: #bcbbbb !important; + } + + .fc-button.fc-state-active .fc-button-inner { + background-color: #e5e4e4 !important; + background-image: -moz-linear-gradient(top, #e5e4e4, #dddcdc) !important; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e5e4e4), to(#dddcdc)) !important; + background-image: -webkit-linear-gradient(top, #e5e4e4, #dddcdc) !important; + background-image: -o-linear-gradient(top, #e5e4e4, #dddcdc) !important; + background-image: linear-gradient(to bottom, #e5e4e4, #dddcdc) !important; + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#e5e4e4', endColorstr='#dddcdc', GradientType=0) !important; + } + + .fc-content { + margin-top: 50px; + } + + .fc-header-title h2 { + line-height: 40px !important; + font-size: 12px !important; + } + + .fc-header { + margin-bottom:0px !important; + } + + /*--*/ + + /*.chart-position {*/ + /*margin-top: 0px;*/ + /*}*/ + + .stepy-titles li { + margin: 10px 3px; + } + + /*-----*/ + .custom-bar-chart { + margin-bottom: 40px; + } + + /*menu icon plus minus*/ + .dcjq-icon { + top: 10px; + } + ul.sidebar-menu li ul.sub li a { + padding: 0; + } + + /*---*/ + + .img-responsive { + width: 100%; + } + +} + + + +@media (max-width: 480px) { + + .notify-row, .search, .dont-show , .inbox-head .sr-input, .inbox-head .sr-btn{ + display: none; + } + + #top_menu .nav > li, ul.top-menu > li { + float: right; + } + .hidden-phone { + display: none !important; + } + + .chart-position { + margin-top: 0px; + } + + .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { + background-color: #ccc; + border-color:#ccc ; + } + +} + +@media (max-width:320px) { + .login-social-link a { + padding: 15px 17px !important; + } + + .notify-row, .search, .dont-show, .inbox-head .sr-input, .inbox-head .sr-btn { + display: none; + } + + #top_menu .nav > li, ul.top-menu > li { + float: right; + } + + .hidden-phone { + display: none !important; + } + + .chart-position { + margin-top: 0px; + } + + .lock-wrapper { + margin: 10% auto; + max-width: 310px; + } + .lock-input { + width: 82%; + } + + .cmt-form { + display: inline-block; + width: 75%; + } + +} + + + + diff --git a/app/assets/css/style.css b/app/assets/css/style.css new file mode 100644 index 0000000..e1c4ec3 --- /dev/null +++ b/app/assets/css/style.css @@ -0,0 +1,2216 @@ +/* +Template Name: DASHGUM FREE - Bootstrap 3.2 Admin Theme +Template Version: 1.0 +Author: Carlos Alvarez +Website: http://blacktie.co +Premium: http://www.gridgum.com +*/ + +/* Import fonts */ +@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,900); + +/* BASIC THEME CONFIGURATION */ +body { + color: #797979; + background: #f2f2f2; + font-family: 'Roboto', sans-serif; + padding: 0px !important; + margin: 0px !important; + font-size:13px; +} + +a, a:hover, a:focus { + text-decoration: none; + outline: none; +} +::selection { + + background: #68dff0; + color: #fff; +} +::-moz-selection { + background: #68dff0; + color: #fff; +} + +#container { + width: 100%; + height: 100%; +} + +/* Bootstrap Modifications */ +.modal-header { + background: #68dff0; +} + +.modal-title { + color: white; +} + +.btn-round { + border-radius: 20px; + -webkit-border-radius: 20px; +} + +.accordion-heading .accordion-toggle { + display: block; + cursor: pointer; + border-top: 1px solid #F5F5F5; + padding: 5px 0px; + line-height: 28.75px; + text-transform: uppercase; + color: #1a1a1a; + background-color: #ffffff; + outline: none !important; + text-decoration: none; +} + + + +/*Theme Backgrounds*/ + +.bg-theme { + background-color: #68dff0; +} + +.bg-theme02 { + background-color: #ac92ec; +} + +.bg-theme03 { + background-color: #48cfad; +} + +.bg-theme04 { + background-color: #ed5565; +} +/*Theme Buttons*/ + +.btn-theme { + color: #fff; + background-color: #68dff0; + border-color: #48bcb4; +} +.btn-theme:hover, +.btn-theme:focus, +.btn-theme:active, +.btn-theme.active, +.open .dropdown-toggle.btn-theme { + color: #fff; + background-color: #48bcb4; + border-color: #48bcb4; +} + +.btn-theme02 { + color: #fff; + background-color: #ac92ec; + border-color: #967adc; +} +.btn-theme02:hover, +.btn-theme02:focus, +.btn-theme02:active, +.btn-theme02.active, +.open .dropdown-toggle.btn-theme02 { + color: #fff; + background-color: #967adc; + border-color: #967adc; +} + +.btn-theme03 { + color: #fff; + background-color: #48cfad; + border-color: #37bc9b; +} +.btn-theme03:hover, +.btn-theme03:focus, +.btn-theme03:active, +.btn-theme03.active, +.open .dropdown-toggle.btn-theme03 { + color: #fff; + background-color: #37bc9b; + border-color: #37bc9b; +} + +.btn-theme04 { + color: #fff; + background-color: #ed5565; + border-color: #da4453; +} +.btn-theme04:hover, +.btn-theme04:focus, +.btn-theme04:active, +.btn-theme04.active, +.open .dropdown-toggle.btn-theme04 { + color: #fff; + background-color: #da4453; + border-color: #da4453; +} + +.btn-clear-g { + color: #48bcb4; + background: transparent; + border-color: #48bcb4; +} + +.btn-clear-g:hover { + color: white; +} + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #797979; +} + + + +/*Helpers*/ + +.centered { + text-align: center; +} + +.goleft { + text-align: left; +} + +.goright { + text-align: right; +} + +.mt { + margin-top: 25px; +} + +.mb { + margin-bottom: 25px; +} + +.ml { + margin-left: 5px; + } + +.no-padding { + padding: 0 !important; +} + +.no-margin { + margin: 0 !important; +} + +/*Exclusive Theme Colors Configuration*/ + +.label-theme { + background-color: #68dff0; +} + +.bg-theme { + background-color: #68dff0; +} + +ul.top-menu > li > .logout { + color: #f2f2f2; + font-size: 12px; + border-radius: 4px; + -webkit-border-radius: 4px; + border: 1px solid #64c3c2 !important; + padding: 5px 15px; + margin-right: 15px; + background: #68dff0; + margin-top: 15px; + cursor: pointer; +} + + +/*sidebar navigation*/ + +#sidebar { + width: 210px; + height: 100%; + position: fixed; + background: #424a5d; +} + +#sidebar h5 { + color: #f2f2f2; + font-weight: 700; +} + +#sidebar ul li { + position: relative; +} + +#sidebar .sub-menu > .sub li { + padding-left: 32px; +} + +#sidebar .sub-menu > .sub li:last-child { + padding-bottom: 10px; +} + +/*LEFT NAVIGATION ICON*/ +.dcjq-icon { + height:17px; + width:17px; + display:inline-block; + border-radius:3px; + -moz-border-radius:3px; + -webkit-border-radius:3px; + position:absolute; + right:10px; + top:15px; +} +.active .dcjq-icon { + border-radius:3px; + -moz-border-radius:3px; + -webkit-border-radius:3px; +} +/*---*/ + +.nav-collapse.collapse { + display: inline; +} + +ul.sidebar-menu , ul.sidebar-menu li ul.sub{ + margin: -2px 0 0; + padding: 0; +} + +ul.sidebar-menu { + margin-top: 75px; +} + +#sidebar > ul > li > ul.sub { + display: none; +} + +#sidebar > ul > li.active > ul.sub, #sidebar > ul > li > ul.sub > li > a { + display: block; +} + +ul.sidebar-menu li ul.sub li{ + background: #424a5d; + margin-bottom: 0; + margin-left: 0; + margin-right: 0; +} + +ul.sidebar-menu li ul.sub li:last-child{ + border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; +} + +ul.sidebar-menu li ul.sub li a { + font-size: 12px; + padding: 6px 0; + line-height: 35px; + height: 35px; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; + color: #aeb2b7; +} + +ul.sidebar-menu li ul.sub li a:hover { + color: white; + background: transparent; +} + +ul.sidebar-menu li ul.sub li.active a { + color: #68dff0; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; + display: block; +} + +ul.sidebar-menu li{ + /*line-height: 20px !important;*/ + margin-bottom: 5px; + margin-left:10px; + margin-right:10px; +} + +ul.sidebar-menu li.sub-menu{ + line-height: 15px; +} + +ul.sidebar-menu li a span{ + display: inline-block; +} + +ul.sidebar-menu li a{ + color: #aeb2b7; + text-decoration: none; + display: block; + padding: 15px 0 15px 10px; + font-size: 12px; + outline: none; + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; +} + +ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus { + background: #68dff0; + color: #fff; + display: block; + + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; +} + + +ul.sidebar-menu li a i { + font-size: 15px; + padding-right: 6px; +} + +ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i { + color: #fff; +} + +ul.sidebar-menu li a.active i { + color: #fff; +} + + +.mail-info, .mail-info:hover { + margin: -3px 6px 0 0; + font-size: 11px; +} + +/* MAIN CONTENT CONFIGURATION */ +#main-content { + margin-left: 210px; +} + +.header, .footer { + min-height: 60px; + padding: 0 15px; +} + +.header { + position: fixed; + left: 0; + right: 0; + z-index: 1002; +} + +.black-bg { + background: #ffd777; + border-bottom: 1px solid #c9aa5f; +} + +.wrapper { + display: inline-block; + margin-top: 60px; + padding-left: 15px; + padding-right: 15px; + padding-bottom: 15px; + padding-top: 0px; + width: 100%; +} + +a.logo { + font-size: 20px; + color: #ffffff; + float: left; + margin-top: 15px; + text-transform: uppercase; +} + +a.logo b { + font-weight: 900; +} + +a.logo:hover, a.logo:focus { + text-decoration: none; + outline: none; +} + +a.logo span { + color: #68dff0; +} + + +/*notification*/ +#top_menu .nav > li, ul.top-menu > li { + float: left; +} + +.notify-row { + float: left; + margin-top: 15px; + margin-left: 92px; +} + +.notify-row .notification span.label { + display: inline-block; + height: 18px; + width: 20px; + padding: 5px; +} + +ul.top-menu > li > a { + color: #666666; + font-size: 16px; + border-radius: 4px; + -webkit-border-radius: 4px; + border:1px solid #666666 !important; + padding: 2px 6px; + margin-right: 15px; +} + +ul.top-menu > li > a:hover, ul.top-menu > li > a:focus { + border:1px solid #b6b6b6 !important; + background-color: transparent !important; + border-color: #b6b6b6 !important; + text-decoration: none; + border-radius: 4px; + -webkit-border-radius: 4px; + color: #b6b6b6 !important; +} + +.notify-row .badge { + position: absolute; + right: -10px; + top: -10px; + z-index: 100; +} + +.dropdown-menu.extended { + max-width: 300px !important; + min-width: 160px !important; + top: 42px; + width: 235px !important; + padding: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important; + border: none !important; + border-radius: 4px; + -webkit-border-radius: 4px; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + /* Safari and Chrome */ + .dropdown-menu.extended { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important; + }; + } + +.dropdown-menu.extended li p { + background-color: #F1F2F7; + color: #666666; + margin: 0; + padding: 10px; + border-radius: 4px 4px 0px 0px; + -webkit-border-radius: 4px 4px 0px 0px; +} + +.dropdown-menu.extended li p.green { + background-color: #68dff0; + color: #fff; +} + +.dropdown-menu.extended li p.yellow { + background-color: #fcb322; + color: #fff; +} + +.dropdown-menu.extended li a { + border-bottom: 1px solid #EBEBEB !important; + font-size: 12px; + list-style: none; +} + +.dropdown-menu.extended li a { + padding: 15px 10px !important; + width: 100%; + display: inline-block; +} + +.dropdown-menu.extended li a:hover { + background-color: #F7F8F9 !important; + color: #2E2E2E; +} + +.dropdown-menu.tasks-bar .task-info .desc { + font-size: 13px; + font-weight: normal; +} + +.dropdown-menu.tasks-bar .task-info .percent { + display: inline-block; + float: right; + font-size: 13px; + font-weight: 600; + padding-left: 10px; + margin-top: -4px; +} + +.dropdown-menu.extended .progress { + margin-bottom: 0 !important; + height: 10px; +} + +.dropdown-menu.inbox li a .photo img { + border-radius: 2px 2px 2px 2px; + float: left; + height: 40px; + margin-right: 4px; + width: 40px; +} + +.dropdown-menu.inbox li a .subject { + display: block; +} + +.dropdown-menu.inbox li a .subject .from { + font-size: 12px; + font-weight: 600; +} + +.dropdown-menu.inbox li a .subject .time { + font-size: 11px; + font-style: italic; + font-weight: bold; + position: absolute; + right: 5px; +} + +.dropdown-menu.inbox li a .message { + display: block !important; + font-size: 11px; +} + +.top-nav { + margin-top: 7px; +} + +.top-nav ul.top-menu > li .dropdown-menu.logout { + width: 268px !important; + +} + +.top-nav li.dropdown .dropdown-menu { + float: right; + right: 0; + left: auto; +} + +.dropdown-menu.extended.logout > li { + float: left; + text-align: center; + width: 33.3%; +} + +.dropdown-menu.extended.logout > li:last-child { + float: left; + text-align: center; + width: 100%; + background: #a9d96c; + border-radius: 0 0 3px 3px; +} + +.dropdown-menu.extended.logout > li:last-child > a, .dropdown-menu.extended.logout > li:last-child > a:hover { + color: #fff; + border-bottom: none !important; + text-transform: uppercase; +} + +.dropdown-menu.extended.logout > li:last-child > a:hover > i{ + color: #fff; +} + +.dropdown-menu.extended.logout > li > a { + color: #a4abbb; + border-bottom: none !important; +} + +.full-width .dropdown-menu.extended.logout > li > a:hover { + background: none !important; + color: #50c8ea !important; +} + +.dropdown-menu.extended.logout > li > a:hover { + background: none !important; +} + +.dropdown-menu.extended.logout > li > a:hover i { + color: #50c8ea; +} + +.dropdown-menu.extended.logout > li > a i { + font-size: 17px; +} + +.dropdown-menu.extended.logout > li > a > i { + display: block; +} + +.top-nav ul.top-menu > li > a { + border: 1px solid #eeeeee; + border-radius: 4px; + -webkit-border-radius: 4px; + padding: 6px; + background: none; + margin-right: 0; +} +.top-nav ul.top-menu > li { + margin-left: 10px; +} + +.top-nav ul.top-menu > li > a:hover, .top-nav ul.top-menu > li > a:focus { + border:1px solid #F1F2F7; + background: #F1F2F7; + +} + +.top-nav .dropdown-menu.extended.logout { + top: 50px; +} + +.top-nav .nav .caret { + border-bottom-color: #A4AABA; + border-top-color: #A4AABA; +} +.top-nav ul.top-menu > li > a:hover .caret { + border-bottom-color: #000; + border-top-color: #000; +} + +/*----*/ + +.notify-arrow { + border-style: solid; + border-width: 0 9px 9px; + height: 0; + margin-top: 0; + opacity: 0; + position: absolute; + left: 7px; + top: -18px; + transition: all 0.25s ease 0s; + width: 0; + z-index: 10; + margin-top: 10px; + opacity: 1; +} + +.notify-arrow-yellow { + border-color: transparent transparent #FCB322; + border-bottom-color: #FCB322 !important; + border-top-color: #FCB322 !important; +} +.notify-arrow-green { + border-color: transparent transparent #68dff0; + border-bottom-color: #68dff0 !important; + border-top-color: #68dff0 !important; +} + + + +/*--sidebar toggle---*/ + +.sidebar-toggle-box { + float: left; + padding-right: 15px; + margin-top: 20px; +} + +.sidebar-toggle-box .fa-bars { + cursor: pointer; + display: inline-block; + font-size: 20px; +} + + +.sidebar-closed > #sidebar > ul { + display: none; +} + +.sidebar-closed #main-content { + margin-left: 0px; +} + +.sidebar-closed #sidebar { + margin-left: -180px; +} + + +/* Dash Side */ + +.ds { + background: #ffffff; + padding-top: 20px; +} + +.ds h4 { + font-size: 14px; + font-weight: 700; +} + +.ds h3 { + color: #ffffff; + font-size: 16px; + padding: 0 10px; + line-height: 60px; + height: 60px; + margin: 0; + background: #ff865c; + text-align: center; +} + +.ds i { + font-size: 12px; + line-height: 16px; +} + +.ds .desc { + border-bottom: 1px solid #eaeaea; + display: inline-block; + padding: 15px 0; + width: 100%; +} + +.ds .desc:hover { + background: #f2f2f2; +} + +.ds .thumb { + width: 30px; + margin: 0 10px 0 20px; + display: block; + float: left; +} + +.ds .details { + width: 170px; + float: left; +} + +.desc p { + font-size: 11px; +} + +.ds p > muted { + font-size: 9px; + text-transform: uppercase; + font-style: italic; + color: #666666 +} + +.ds a { + color: #68dff0; +} + +/* LINE ICONS CONFIGURATION */ + +.mtbox { + margin-top: 80px; + margin-bottom: 40px; +} + +.box1 { + padding: 15px; + text-align: center; + color: #989898; + border-bottom: 1px solid #989898; +} + +.box1 span.fa { + font-size: 50px; +} + +.box1 h3 { + text-align: center; +} + +.box0:hover .box1 { + border-bottom: 1px solid #ffffff; +} + +.box0 p { + text-align: center; + font-size: 12px; + color: #f2f2f2; +} + +.box0:hover p { + color: #ff865c; +} + +.box0:hover { + background: #ffffff; + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); +} + +/* MAIN CHART CONFIGURATION */ +.main-chart { + padding-top: 20px; +} + +.mleft { +} + +.border-head h3 { + margin-top: 20px; + margin-bottom: 20px; + margin-left: 15px; + padding-bottom: 5px; + font-weight: normal; + font-size: 18px; + display: inline-block; + width: 100%; + font-weight: 700; + color: #989898; +} + +.custom-bar-chart { + height: 290px; + margin-top: 20px; + margin-left: 20px; + position: relative; + border-bottom: 1px solid #c9cdd7; +} + +.custom-bar-chart .bar { + height: 100%; + position: relative; + width: 6%; + margin: 0px 4%; + float: left; + text-align: center; + z-index: 10; +} + +.custom-bar-chart .bar .title { + position: absolute; + bottom: -30px; + width: 100%; + text-align: center; + font-size: 11px; +} + +.custom-bar-chart .bar .value { + position: absolute; + bottom: 0; + background: #ff865c; + color: #68dff0; + width: 100%; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; +} + + + +.custom-bar-chart .bar .value:hover { + background: #2f2f2f; + color: #fff; +} + +.y-axis { + color: #555555; + position: absolute; + text-align: left; + width: 100%; + font-size: 11px; +} + +.y-axis li { + border-top: 1px dashed #dbdce0; + display: block; + height: 58px; + width: 100%; +} + +.y-axis li:last-child { + border-top: none; +} + +.y-axis li span { + display: block; + margin: -10px 0 0 -60px; + padding: 0 10px; + width: 40px; +} + + +/*Donut Chart Main Page Conf*/ +.donut-main { + display: block; + text-align: center; +} + +.donut-main h4 { + font-weight: 700; + font-size: 16px; +} + +/* ************************************************************************************* +PANELS CONFIGURATIONS +*************************************************************************************** */ + +/*Panel Size*/ + +.pn { + height: 250px; + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); +} + +.pn:hover { + box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3); + +} + +/*Grey Panel*/ + +.grey-panel { + text-align: center; + background: #dfdfe1; +} +.grey-panel .grey-header { + background: #ccd1d9; + padding: 3px; + margin-bottom: 15px; +} +.grey-panel h5 { + font-weight: 200; + margin-top: 10px; +} +.grey-panel p { + margin-left: 5px; +} +/* Specific Conf for Donut Charts*/ +.donut-chart p { + margin-top: 5px; + font-weight: 700; + margin-left: 15px; +} +.donut-chart h2 { + font-weight: 900; + color: #FF6B6B; + font-size: 38px; +} + +/* Dark Blue*/ + +.darkblue-panel { + text-align: center; + background: #444c57; +} +.darkblue-panel .darkblue-header { + background: transparent; + padding: 3px; + margin-bottom: 15px; +} +.darkblue-panel h1 { + color: #f2f2f2; +} +.darkblue-panel h5 { + font-weight: 200; + margin-top: 10px; + color: white; +} +.darkblue-panel footer { + color: white; +} +.darkblue-panel footer h5 { + margin-left:10px; + margin-right: 10px; + font-weight: 700; +} + +/*Green Panel*/ +.green-panel { + text-align: center; + background: #68dff0; +} +.green-panel .green-header { + background: #43b1a9; + padding: 3px; + margin-bottom: 15px; +} +.green-panel h5 { + color: white; + font-weight: 200; + margin-top: 10px; +} +.green-panel h3 { + color: white; + font-weight: 100; +} +.green-panel p { + color: white; +} + +/*White Panel */ +.white-panel { + text-align: center; + background: #ffffff; + color: #ccd1d9; +} + +.white-panel p { + margin-top: 5px; + font-weight: 700; + margin-left: 15px; +} +.white-panel .white-header { + background: #f4f4f4; + padding: 3px; + margin-bottom: 15px; + color: #c6c6c6; +} +.white-panel .small { + font-size: 10px; + color: #ccd1d9; +} + +.white-panel i { + color: #68dff0; + padding-right: 4px; + font-size: 14px; +} + +/*STOCK CARD Panel*/ +.card { + background: white; + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2); + margin-bottom: 1em; + height: 250px; +} +.stock .stock-chart { + background: #00c5de; +} +.stock .stock-chart #chart { + height: 10.7em; + background: url(http://i.imgbox.com/abmuNQx2) center bottom no-repeat; +} +.stock .current-price { + background: #1d2122; + padding: 10px; +} +.stock .current-price .info abbr { + display: block; + color: #f8f8f8; + font-size: 1.5em; + font-weight: 600; + margin-top: 0.18em; +} +.stock .current-price .changes { + text-align: right; +} +.stock .changes .up { + color: #4fd98b +} +.stock .current-price .changes .value { + font-size: 1.8em; + font-weight: 700; +} +.stock .summary { + color: #2f2f2f; + display: block; + background: #f2f2f2; + padding: 10px; + text-align: center; +} +.stock .summary strong { + font-weight: 900; + font-size: 14px; +} + +/*Content Panel*/ +.content-panel { + background: #ffffff; + box-shadow: 0px 3px 2px #aab2bd; + padding-top: 15px; + padding-bottom: 5px; +} +.content-panel h4 { + margin-left: 10px; +} + +/*WEATHER PANELS*/ + +/* Weather 1 */ +.weather { + text-align: center; + background-position: center center; +} +.weather i { + color: white; + margin-top: 45px; +} +.weather h2 { + color: white; + font-weight: 900; +} +.weather h4 { + color: white; + font-weight: 900; + letter-spacing: 1px; +} + +/* Weather 2 */ +.weather-2 { + background: #e9f0f4; +} +.weather-2 .weather-2-header { + background: #54bae6; + padding-top: 5px; + margin-bottom: 5px; +} +.weather-2 .weather-2-header p { + color: white; + margin-left: 5px; + margin-right: 5px; +} +.weather-2 .weather-2-header p small { + font-size: 10px; +} +.weather-2 .data { + margin-right: 10px; + margin-left: 10px; + color: #272b34; +} +.weather-2 .data h5 { + margin-top: 0px; + font-weight: lighter; +} +.weather-2 .data h1{ + margin-top: 2px; +} + +/* Weather 3 */ +.weather-3 { + background: #ffcf00; +} + +.weather-3 i { + color: white; + margin-top: 30px; + font-size: 70px; +} +.weather-3 h1 { + margin-top: 10px; + color: white; + font-weight: 900; +} +.weather-3 .info { + background: #f2f2f2; +} +.weather-3 .info i { + font-size: 15px; + color: #c2c2c2; + margin-bottom: 0px; + margin-top: 10px; +} +.weather-3 .info h3 { + font-weight: 900; + margin-bottom: 0px; +} +.weather-3 .info p { + margin-left: 10px; + margin-right: 10px; + margin-bottom: 16px; + color: #c2c2c2; + font-size: 15px; + font-weight: 700; +} + + +/*Twitter Panel*/ +.twitter-panel { + background: #4fc1e9; + text-align: center; +} +.twitter-panel i { + color: white; + margin-top: 40px; +} +.twitter-panel p { + color: #f5f5f5; + margin: 10px; +} +.twitter-panel .user { + color: white; + font-weight: 900; +} + + +/* Instagram Panel*/ +.instagram-panel { + text-align: center; + background-position: center center; +} +.instagram-panel i { + color: white; + margin-top: 35px; +} +.instagram-panel p { + margin: 5px; + color: white; +} + +/* Product Panel */ +.product-panel { + background: #dadad2; + text-align: center; + padding-top: 50px; + height: 100%; +} + +/* Product Panel 2*/ +.product-panel-2 { + background: #dadad2; + text-align: center; +} +.product-panel-2 .badge { + position: absolute; + top: 20px; + left: 35px; +} +.badge-hot { + background: #ed5565; + width: 70px; + height: 70px; + line-height: 70px; + font-size: 18px; + color: #fff; + text-align: center; + border-radius: 100%; +} + +/* Soptify Panel */ +#spotify { + margin-top: -15px; + background-attachment: relative; + background-position: center center; + min-height: 220px; + width: 100%; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +#spotify .btn-clear-g { + top: 15%; + right: 10px; + position: absolute; + margin-top: 5px; +} +#spotify .sp-title { + bottom: 15%; + left: 25px; + position: absolute; + color: #efefef; +} +#spotify .sp-title h3 { + font-weight: 900; +} +#spotify .play{ + bottom: 18%; + right: 25px; + position: absolute; + color: #efefef; + font-size: 20px +} +.followers { + margin-left: 5px; + margin-top: 5px; +} + +/* BLOG PANEL */ +#blog-bg { + margin-top: -15px; + background-attachment: relative; + background-position: center center; + min-height: 150px; + width: 100%; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +#blog-bg .badge { + position: absolute; + top: 20px; + left: 35px; +} +.badge-popular { + background: #3498db; + width: 70px; + height: 70px; + line-height: 70px; + font-size: 13px; + color: #fff; + text-align: center; + border-radius: 100%; +} +.blog-title { + background: rgba(0,0,0,0.5); + bottom: 100px; + padding: 6px; + color: white; + font-weight: 700; + position: absolute; + display: block; + width: 120px; +} +.blog-text { + margin-left: 8px; + margin-right: 8px; + margin-top: 15px; + font-size: 12px; +} + +/* Calendar Configuration */ +#calendar { + color: white; + padding: 0px !important; +} +.calendar-month-header { + background: #43b1a9; +} + +/* TODO PANEL */ +.steps{ + display: block; +} +.steps input[type=checkbox] { + display: none; +} +.steps input[type=submit]{ + background: #f1783c; + border: none; + padding: 0px; + margin: 0 auto; + width: 100%; + height: 55px; + color: white; + text-transform: uppercase; + font-weight: 900; + font-size: 11px; + letter-spacing: 1px; + cursor: pointer; + transition: background 0.5s ease +} +.steps input[type=submit]:hover{ + background: #8fde9c; +} +.steps label{ + background: #393D40; + height: 65px; + line-height: 65px; + width: 100%; + display: block; + border-bottom: 1px solid #44494e; + color: #889199; + text-transform: uppercase; + font-weight: 900; + font-size: 11px; + letter-spacing: 1px; + text-indent: 52px; + cursor: pointer; + transition: all 0.7s ease; + margin: 0px; +} +.steps label:before{ + content:""; + width: 12px; + height: 12px; + display: block; + position: absolute; + margin: 26px 0px 0px 18px; + border-radius: 100%; + transition: border 0.7s ease +} +.steps label:hover{ + background: #2B2E30; + color: #46b7e5 +} +.steps label:hover:before{ + border: 1px solid #46b7e5; +} +#op1:checked ~ label[for=op1]:before, +#op2:checked ~ label[for=op2]:before, +#op3:checked ~ label[for=op3]:before{ + border: 2px solid #96c93c; + background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGFJREFUeNpinHLMhgEHKADia0xQThIQs6JJ9gPxZhYQAcS6QHwDiI8hSYJAC0gBPxDLAvFcIJ6JJJkDxFNBVtgBcQ8Qa6BLghgwN4A4a9ElQYAFSj8C4mwg3o8sCQIAAQYA78QTYqnPZuEAAAAASUVORK5CYII=') no-repeat center center; +} + +/* PROFILE PANELS */ +/* Profile 01*/ +#profile-01 { + margin-top: -15px; + background-attachment: relative; + background-position: center center; + min-height: 150px; + width: 100%; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +#profile-01 h3 { + color: white; + padding-top: 50px; + margin: 0px; + text-align: center; +} +#profile-01 h6 { + color: white; + text-align: center; + margin-bottom: 0px; + font-weight: 900; +} +.profile-01 { + background: #68dff0; + height: 50px; +} +.profile-01:hover { + background: #2f2f2f; + -webkit-transition: background-color 0.6s; + -moz-transition: background-color 0.6s; + -o-transition: background-color 0.6s; + transition: background-color 0.6s; + cursor: pointer; +} +.profile-01 p { + color: white; + padding-top: 15px; + font-weight: 400; + font-size: 15px; +} + +/* Profile 02*/ +#profile-02 { + margin-top: -15px; + background-attachment: relative; + background-position: center center; + min-height: 200px; + width: 100%; + -webkit-background-size: 100%; + -moz-background-size: 100%; + -o-background-size: 100%; + background-size: 100%; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +#profile-02 .user { + padding-top: 40px; + text-align: center; +} +#profile-02 h4 { + color: white; + margin:0px; + padding-top: 8px; +} +.pr2-social a { + color: #cdcdcd; +} +.pr2-social a:hover { + color: #68dff0; +} +.pr2-social i { + margin-top: 15px; + margin-right: 12px; + font-size: 20px; +} + + +/*spark line*/ +.chart { + display: inline-block; + text-align: center; + width: 100%; +} +.chart .heading { + text-align: left; +} +.chart .heading span { + display: block; +} +.panel.green-chart .chart-tittle { + font-size: 16px; + padding: 15px; + display: inline-block; + font-weight:normal; + background: #99c262; + width: 100%; + -webkit-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +#barchart { + margin-bottom: -15px; + display: inline-block; +} +.panel.green-chart .chart-tittle .value { + float: right; + color: #c0f080; +} +.panel.green-chart { + background: #a9d96c; + color: #fff; +} +.panel.terques-chart { + background: transparent; + color: #797979; +} +.panel.terques-chart .chart-tittle .value { + float: right; + color: #fff; +} +.panel.terques-chart .chart-tittle .value a { + color: #2f2f2f; + font-size: 12px; +} +.panel.terques-chart .chart-tittle .value a:hover, .panel.terques-chart .chart-tittle .value a.active { + color: #68dff0; + font-size: 12px; +} +.panel.terques-chart .chart-tittle { + font-size: 16px; + padding: 15px; + display: inline-block; + font-weight:normal; + background: #39b7ac; + width: 100%; + -webkit-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; +} +.inline-block { + display: inline-block; +} + +/* showcase background */ +.showback { + background: #ffffff; + padding: 15px; + margin-bottom: 15px; + box-shadow: 0px 3px 2px #aab2bd; +} + + + +/* Calendar Events - Calendar.html*/ +.external-event { + cursor: move; + display: inline-block !important; + margin-bottom: 7px !important; + margin-right: 7px !important; + padding: 10px; +} + +.drop-after { + padding-top: 15px; + margin-top: 15px; + border-top: 1px solid #ccc; +} + +.fc-state-default, .fc-state-default .fc-button-inner { + background: #f2f2f2; +} + +.fc-state-active .fc-button-inner { + background: #FFFFFF; +} + +/* Gallery Configuration */ +.photo-wrapper { + display: block; + position: relative; + overflow: hidden; + background-color: #68dff0; + -webkit-transition: background-color 0.4s; + -moz-transition: background-color 0.4s; + -o-transition: background-color 0.4s; + transition: background-color 0.4s; +} +.project .overlay { + position: absolute; + text-align: center; + color: #fff; + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.4s; + -moz-transition: opacity 0.4s; + -o-transition: opacity 0.4s; + transition: opacity 0.4s; + +} + +.project:hover .photo-wrapper { + background-color: #68dff0; + background-repeat:no-repeat; + background-position:center; + top: 0; + bottom: 0; + left: 0; + right: 0; + position: relative; +} +.project:hover .photo { + opacity: 10; + filter: alpha(opacity=4000); + opacity: 0.1; + filter: alpha(opacity=40); +} +.project:hover .overlay { + opacity: 100; + filter: alpha(opacity=10000); + opacity: 1; + filter: alpha(opacity=100); +} + + + +/* EZ Checklist */ +.ez-checkbox { + margin-right: 5px; +} + +.ez-checkbox, .ez-radio { + height: 20px; + width: 20px; +} + +.brand-highlight { +background: #fffbcc !important; +} + + +/* FORMS CONFIGURATION */ +.form-panel { + background: #ffffff; + margin: 10px; + padding: 10px; + box-shadow: 0px 3px 2px #aab2bd; + text-align: left; +} + +label { + font-weight: 400; +} + +.form-horizontal.style-form .form-group { + border-bottom: 1px solid #eff2f7; + padding-bottom: 15px; + margin-bottom: 15px; +} + +.round-form { + border-radius: 500px; + -webkit-border-radius: 500px; +} + +@media (min-width: 768px) { + .form-horizontal .control-label { + text-align: left; + } +} + +#focusedInput { + border: 1px solid #ed5565; + box-shadow: none; +} + +.add-on { + float: right; + margin-top: -37px; + padding: 3px; + text-align: center; +} + +.add-on .btn { + height: 34px; +} + +/* TOGGLE CONFIGURATION */ +.has-switch { + border-radius: 30px; + -webkit-border-radius: 30px; + display: inline-block; + cursor: pointer; + line-height: 1.231; + overflow: hidden; + position: relative; + text-align: left; + width: 80px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; +} +.has-switch.deactivate { + opacity: 0.5; + filter: alpha(opacity=50); + cursor: default !important; +} +.has-switch.deactivate label, +.has-switch.deactivate span { + cursor: default !important; +} +.has-switch > div { + width: 162%; + position: relative; + top: 0; +} +.has-switch > div.switch-animate { + -webkit-transition: left 0.25s ease-out; + -moz-transition: left 0.25s ease-out; + -o-transition: left 0.25s ease-out; + transition: left 0.25s ease-out; + -webkit-backface-visibility: hidden; +} +.has-switch > div.switch-off { + left: -63%; +} +.has-switch > div.switch-off label { + background-color: #7f8c9a; + border-color: #bdc3c7; + -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); + -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); + box-shadow: -1px 0 0 rgba(255, 255, 255, 0.5); +} +.has-switch > div.switch-on { + left: 0%; +} +.has-switch > div.switch-on label { + background-color: #41cac0; +} +.has-switch input[type=checkbox] { + display: none; +} +.has-switch span { + cursor: pointer; + font-size: 14.994px; + font-weight: 700; + float: left; + height: 29px; + line-height: 19px; + margin: 0; + padding-bottom: 6px; + padding-top: 5px; + position: relative; + text-align: center; + width: 50%; + z-index: 1; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: 0.25s ease-out; + -moz-transition: 0.25s ease-out; + -o-transition: 0.25s ease-out; + transition: 0.25s ease-out; + -webkit-backface-visibility: hidden; +} +.has-switch span.switch-left { + border-radius: 30px 0 0 30px; + background-color: #2A3542; + color: #41cac0; + border-left: 1px solid transparent; +} +.has-switch span.switch-right { + border-radius: 0 30px 30px 0; + background-color: #bdc3c7; + color: #ffffff; + text-indent: 7px; +} +.has-switch span.switch-right [class*="fui-"] { + text-indent: 0; +} +.has-switch label { + border: 4px solid #2A3542; + border-radius: 50%; + -webkit-border-radius: 50%; + float: left; + height: 29px; + margin: 0 -21px 0 -14px; + padding: 0; + position: relative; + vertical-align: middle; + width: 29px; + z-index: 100; + -webkit-transition: 0.25s ease-out; + -moz-transition: 0.25s ease-out; + -o-transition: 0.25s ease-out; + transition: 0.25s ease-out; + -webkit-backface-visibility: hidden; +} +.switch-square { + border-radius: 6px; + -webkit-border-radius: 6px; +} +.switch-square > div.switch-off label { + border-color: #7f8c9a; + border-radius: 6px 0 0 6px; +} +.switch-square span.switch-left { + border-radius: 6px 0 0 6px; +} +.switch-square span.switch-left [class*="fui-"] { + text-indent: -10px; +} +.switch-square span.switch-right { + border-radius: 0 6px 6px 0; +} +.switch-square span.switch-right [class*="fui-"] { + text-indent: 5px; +} +.switch-square label { + border-radius: 0 6px 6px 0; + border-color: #41cac0; +} + + + +/*LOGIN CONFIGURATION PAGE*/ +.form-login { + max-width: 330px; + margin: 100px auto 0; + background: #fff; + border-radius: 5px; + -webkit-border-radius: 5px; +} + +.form-login h2.form-login-heading { + margin: 0; + padding: 25px 20px; + text-align: center; + background: #68dff0; + border-radius: 5px 5px 0 0; + -webkit-border-radius: 5px 5px 0 0; + color: #fff; + font-size: 20px; + text-transform: uppercase; + font-weight: 300; +} +.login-wrap { + padding: 20px; +} +.login-wrap .registration { + text-align: center; +} +.login-social-link { + display: block; + margin-top: 20px; + margin-bottom: 15px; +} + + +/*LOCK SCREEN CONF*/ +#showtime { + width: 100%; + color: #fff; + font-size: 90px; + margin-bottom: 30px; + margin-top: 250px; + display: inline-block; + text-align: center; + font-weight: 400; +} + +.lock-screen { + text-align: center; +} + +.lock-screen a { + color: white; +} + +.lock-screen a:hover { + color: #48cfad +} + +.lock-screen i { + font-size: 60px; +} + +.lock-screen .modal-content { + position: relative; + background-color: #f2f2f2; + background-clip: padding-box; + border: 1px solid #999; + border: 1px solid rgba(0, 0, 0, .2); + border-radius: 5px; +} + + +.btn-facebook { + color: #fff; + background-color: #5193ea; + border-color: #2775e2; +} +.btn-facebook:hover, +.btn-facebook:focus, +.btn-facebook:active, +.btn-facebook.active, +.open .dropdown-toggle.btn-facebook { + color: #fff; + background-color: #2775e2; + border-color: #2775e2; +} + +.btn-twitter { + color: #fff; + background-color: #44ccfe; + border-color: #2bb4e8; +} +.btn-twitter:hover, +.btn-twitter:focus, +.btn-twitter:active, +.btn-twitter.active, +.open .dropdown-toggle.btn-twitter { + color: #fff; + background-color: #2bb4e8; + border-color: #2bb4e8; +} + + +/*badge*/ +.badge.bg-primary { + background: #8075c4; +} + +.badge.bg-success { + background: #a9d86e; +} + +.badge.bg-warning { + background: #FCB322; +} + +.badge.bg-important { + background: #ff6c60; +} + +.badge.bg-info { + background: #41cac0; +} + +.badge.bg-inverse { + background: #2A3542; +} + + +/*easy pie chart*/ +.easy-pie-chart { + display: inline-block; + padding: 30px 0; +} + +.chart-info, .chart-info .increase, .chart-info .decrease { + display: inline-block; +} + +.chart-info { + width: 100%; + margin-bottom:5px; +} + +.chart-position { + margin-top: 70px; +} + +.chart-info span { + margin: 0 3px; +} + +.chart-info .increase { + background: #ff6c60; + width: 10px; + height: 10px; +} + +.chart-info .decrease { + background: #f2f2f2; + width: 10px; + height: 10px; +} + +.panel-footer.revenue-foot { + background-color: #e6e7ec; + -webkit-border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 4px 4px; + border: none; + padding: 0; + width: 100%; + display: inline-block; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + /* Safari and Chrome */ + .panel-footer.revenue-foot { + margin-bottom: -4px; + }; + } + + +.panel-footer.revenue-foot ul { + margin: 0; + padding: 0; + width: 100%; + display: inline-flex; +} + +.panel-footer.revenue-foot ul li { + float: left; + width: 33.33%; +} + +.panel-footer.revenue-foot ul li.first a:hover, .panel-footer.revenue-foot ul li.first a { + -webkit-border-radius: 0px 0px 0px 4px; + border-radius: 0px 0px 0px 4px; +} + +.panel-footer.revenue-foot ul li.last a:hover, .panel-footer.revenue-foot ul li.last a { + -webkit-border-radius: 0px 0px 4px 0px; + border-radius: 0px 0px 4px 0px; + border-right: none; + +} + +.panel-footer.revenue-foot ul li a{ + display: inline-block; + width: 100%; + padding: 14px 15px; + text-align: center; + border-right: 1px solid #d5d8df; + color: #797979; +} + +.panel-footer.revenue-foot ul li a:hover, .panel-footer.revenue-foot ul li.active a { + background: #fff; + position: relative; +} + +.panel-footer.revenue-foot ul li a i { + color: #c6cad5; + display: block; + font-size: 16px; +} +.panel-footer.revenue-foot ul li a:hover i, .panel-footer.revenue-foot ul li.active a i { + color: #ff6c60; + display: block; + font-size: 16px; +} + + +/*flot chart*/ +.flot-chart .chart, .flot-chart .pie, .flot-chart .bars { + height: 300px; +} + +/*todolist*/ +#sortable { + list-style-type: none; + margin: 0 0 20px 0; + padding: 0; + width: 100%; +} +#sortable li { + padding-left: 3em; + font-size: 12px; +} +#sortable li i { + position: absolute; + left:6px; + padding:4px 10px 0 10px; + cursor: pointer; +} + +#sortable li input[type=checkbox]{ + margin-top: 0; +} + +.ui-sortable > li { + padding: 15px 0 15px 35px !important ; + position: relative; + background: #f5f6f8; + margin-bottom: 2px; + border-bottom : none !important; +} + +.ui-sortable li.list-primary { + border-left: 3px solid #41CAC0; +} + +.ui-sortable li.list-success { + border-left: 3px solid #78CD51; +} + +.ui-sortable li.list-danger { + border-left: 3px solid #FF6C60; +} + +.ui-sortable li.list-warning { + border-left: 3px solid #F1C500; +} + +.ui-sortable li.list-info { + border-left: 3px solid #58C9F3; +} + +.ui-sortable li.list-inverse { + border-left: 3px solid #BEC3C7; +} + +/*footer*/ +.site-footer { + background: #68dff0; + color: #fff; + padding: 10px 0; +} + + +.go-top { + margin-right: 1%; + float: right; + background: rgba(255,255,255,.5); + width: 20px; + height: 20px; + border-radius: 50%; + -webkit-border-radius: 50%; +} + +.go-top i { + color: #2A3542; +} + +.site-min-height { + min-height: 900px; +} + diff --git a/app/assets/css/table-responsive.css b/app/assets/css/table-responsive.css new file mode 100644 index 0000000..5e15990 --- /dev/null +++ b/app/assets/css/table-responsive.css @@ -0,0 +1,94 @@ +/*Unseen Column*/ +@media only screen and (max-width: 800px) { + #unseen table td:nth-child(2), + #unseen table th:nth-child(2) {display: none;} +} + +@media only screen and (max-width: 640px) { + #unseen table td:nth-child(4), + #unseen table th:nth-child(4), + #unseen table td:nth-child(7), + #unseen table th:nth-child(7), + #unseen table td:nth-child(8), + #unseen table th:nth-child(8){display: none;} +} + +/*flip-scroll*/ + +@media only screen and (max-width: 800px) { + #flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } + #flip-scroll * html .cf { zoom: 1; } + #flip-scroll *:first-child+html .cf { zoom: 1; } + #flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; } + + #flip-scroll th, + #flip-scroll td { margin: 0; vertical-align: top; } + #flip-scroll th { text-align: left; } + #flip-scroll table { display: block; position: relative; width: 100%; } + #flip-scroll thead { display: block; float: left; } + #flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; } + #flip-scroll thead tr { display: block; } + #flip-scroll th { display: block; text-align: right; } + #flip-scroll tbody tr { display: inline-block; vertical-align: top; } + #flip-scroll td { display: block; min-height: 1.25em; text-align: left; } + + + /* sort out borders */ + + #flip-scroll th { border-bottom: 0; border-left: 0; } + #flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; } + #flip-scroll tbody tr { border-left: 1px solid #babcbf; } + #flip-scroll th:last-child, + #flip-scroll td:last-child { border-bottom: 1px solid #babcbf; } +} + +/*no more table*/ + +@media only screen and (max-width: 800px) { + /* Force table to not be like tables anymore */ + #no-more-tables table, + #no-more-tables thead, + #no-more-tables tbody, + #no-more-tables th, + #no-more-tables td, + #no-more-tables tr { + display: block; + } + + /* Hide table headers (but not display: none;, for accessibility) */ + #no-more-tables thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + #no-more-tables tr { border: 1px solid #ccc; } + + #no-more-tables td { + /* Behave like a "row" */ + border: none; + border-bottom: 1px solid #eee; + position: relative; + padding-left: 50%; + white-space: normal; + text-align:left; + } + + #no-more-tables td:before { + /* Now like a table header */ + position: absolute; + /* Top/left values mimic padding */ + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + text-align:left; + font-weight: bold; + } + + /* + Label the data + */ + #no-more-tables td:before { content: attr(data-title); } +} \ No newline at end of file diff --git a/app/assets/css/to-do.css b/app/assets/css/to-do.css new file mode 100644 index 0000000..52b6d2c --- /dev/null +++ b/app/assets/css/to-do.css @@ -0,0 +1,110 @@ +/*--------------Tasks Widget--------------*/ + +.task-content { + margin-bottom: 30px; +} + +.task-panel { + background: #fff; + text-align: left; + box-shadow: 0px 3px 2px #aab2bd; + margin: 5px; +} + +.tasks-widget .task-content:after { + clear: both; +} + +.tasks-widget .task-footer { + margin-top: 5px; +} + +.tasks-widget .task-footer:after, +.tasks-widget .task-footer:before { + content: ""; + display: table; + line-height: 0; +} + +.tasks-widget .task-footer:after { + clear: both; +} + +.tasks-widget .task-list { + padding:0; + margin:0; +} + +.tasks-widget .task-list > li { + position:relative; + padding:10px 5px; + border-bottom:1px dashed #eaeaea; +} + +.tasks-widget .task-list li.last-line { + border-bottom:none; +} + +.tasks-widget .task-list li > .task-bell { + margin-left:10px; +} + +.tasks-widget .task-list li > .task-checkbox { + float:left; + width:30px; +} + +.tasks-widget .task-list li > .task-title { + overflow:hidden; + margin-right:10px; +} + +.tasks-widget .task-list li > .task-config { + position:absolute; + top:10px; + right:10px; +} + +.tasks-widget .task-list li .task-title .task-title-sp { + margin-right:5px; +} + +.tasks-widget .task-list li.task-done .task-title-sp { + text-decoration:line-through; + color: #bbbbbb; +} + +.tasks-widget .task-list li.task-done { + background:#f6f6f6; +} + +.tasks-widget .task-list li.task-done:hover { + background:#f4f4f4; +} + +.tasks-widget .task-list li:hover { + background:#f9f9f9; +} + +.tasks-widget .task-list li .task-config { + display:none; +} + +.tasks-widget .task-list li:hover > .task-config { + display:block; + margin-bottom:0 !important; +} + + +@media only screen and (max-width: 320px) { + + .tasks-widget .task-config-btn { + float:inherit; + display:block; + } + + .tasks-widget .task-list-projects li > .label { + margin-bottom:5px; + } + +} \ No newline at end of file diff --git a/app/components/Main.jsx b/app/components/Main.jsx new file mode 100644 index 0000000..5c76106 --- /dev/null +++ b/app/components/Main.jsx @@ -0,0 +1,59 @@ +import React, { PropTypes } from 'react'; +import Login from '../login/LoginComponent'; +import NavBar from '../components/navbar'; +import Notification from '../components/notification'; +import Aside from '../components/aside'; +import SettingsStoreHEC from '../hec/settings'; + + +// Styles +import {bootstrap} from '../../bower_components/bootstrap/dist/css/bootstrap.css'; +import {font_awesome} from '../../bower_components/font-awesome/css/font-awesome.css'; +import {responsive} from '../assets/css/style-responsive.css'; +import {style} from '../assets/css/style.css'; +import store from '../store'; + +class Main extends React.Component { + + render = () => { + let settings = this.props.settings; + + if (settings == undefined) { + return
; + } + + let login_children = this.props.children.type == Login; + + if(login_children == true) { + var navbar = undefined; + var aside = undefined; + var notification = undefined; + } else { + var navbar = ; + var aside =