[ { "path": ".dockerignore", "content": ".gitignore\nDockerfile\nMakefile\nREADME.md\nscreenshots/\ntags\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\ntags\n\n" }, { "path": "Dockerfile", "content": "FROM ubuntu:16.04\nMAINTAINER ViViDboarder \n\nRUN apt-get update && \\\n apt-get install -y curl git xsel && \\\n curl --silent --location https://deb.nodesource.com/setup_10.x | bash && \\\n apt-get install -y nodejs && \\\n apt-get remove --purge -y curl && \\\n rm -rf /var/lib/apt/lists/*\n\nRUN mkdir -p /usr/src/app\nWORKDIR /usr/src/app\n\nENV CLI_WIDTH 80\nCOPY package.json /usr/src/app\nRUN npm install && npm cache clean --force\nRUN npm install -g serve\n\nEXPOSE 3000\n\nCOPY . /usr/src/app\n\nCMD [ \"./run.sh\" ]\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2017 Hooram Nam\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "Makefile", "content": ".PHONY: default build run shell\n\nDOCKER_TAG ?= ownphotos-frontend\n\ndefault: build\n\nbuild:\n\tdocker build -t $(DOCKER_TAG) .\n\nrun: build\n\tdocker run $(DOCKER_TAG)\n\nshell: build\n\tdocker run --rm -it $(DOCKER_TAG) /bin/bash\n" }, { "path": "README.md", "content": "
\n\n# Ownphotos\n\n## What is it?\n\n- Self hosted wannabe Google Photos clone, with a slight focus on cool graphs\n- Django backend & React frontend. \n- In development. \n\n[More detailed info on the backend repo readme](https://github.com/hooram/ownphotos-backend)\n\n" }, { "path": "docker-compose.yml", "content": "version: '2'\n\nservices:\n\n proxy:\n image: guysoft/ownphotos-proxy\n tty: true\n container_name: ownphotos-proxy\n restart: always\n links:\n - \"backend:backend\"\n - \"frontend:frontend\"\n ports:\n - \"3000:80\"\n \n ownphotos-db:\n image: postgres\n container_name: ownphotos-db\n restart: always\n environment:\n # This db password is internal, you can change it if you want, but also change it in ownphotos-backend container\n - POSTGRES_PASSWORD=AaAa1234\n - POSTGRES_DB=ownphotos\n volumes:\n - ownphotos-data:/var/lib/postgresql/data\n\n frontend:\n container_name: ownphotos-frontend\n image: guysoft/ownphotos-frontend:dev\n # For development uncomment this and comment the image name above\n #build: .\n tty: true\n environment:\n # This is the path to the backend host public facing. if your website is ownphotos.org then this should be \"ownphotos.org\".\n # Default here is assuming you are running on localhost on port 3000 as given in ownphotos-proxy service\n - BACKEND_HOST=localhost:3000\n links:\n - \"backend:backend\"\n\n backend:\n image: hooram/ownphotos:dev\n container_name: ownphotos-backend\n volumes:\n # Your photos go here\n - $HOME/Pictures/:/data\n - media:/code/media\n environment:\n - SECRET_KEY=change_meme\n # This is backend host from within the service, you dont need to change this\n - BACKEND_HOST=backend\n - ADMIN_EMAIL=admin@example.com\n - ADMIN_USERNAME=admin\n # Change your admin password!\n - ADMIN_PASSWORD=admin\n - DEBUG=true\n - DB_BACKEND=postgresql\n - DB_NAME=ownphotos\n - DB_USER=postgres\n # This db password is internal, you can change it if you want, but also change it in ownphotos-db container\n - DB_PASS=AaAa1234\n - DB_HOST=ownphotos-db\n - DB_PORT=5432\n - REDIS_HOST=ownphotos-redis\n - REDIS_PORT=6379\n - MAPBOX_API_KEY=CHANGE_MEAAAA\n links:\n - \"ownphotos-db:ownphotos-db\"\n - \"ownphotos-redis:ownphotos-redis\"\n \n ownphotos-redis:\n image: redis\n container_name: ownphotos-redis\n\nvolumes:\n ownphotos-data:\n media:\n" }, { "path": "nginx.conf", "content": "user nginx;\nworker_processes 1;\n\nerror_log /var/log/nginx/error.log debug;\n\nevents {\n worker_connections 1024;\n}\n\n\nhttp {\n server {\n listen 80;\n location / {\n proxy_pass http://frontend:3000/;\n }\n location /api {\n proxy_pass http://backend/api;\n }\n }\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"ownphotos-frontend\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@vx/gradient\": \"0.0.161\",\n \"@vx/group\": \"0.0.161\",\n \"@vx/hierarchy\": \"0.0.161\",\n \"@vx/shape\": \"0.0.162\",\n \"axios\": \"^0.18.0\",\n \"bootstrap\": \"^4.1.1\",\n \"calendar-months\": \"^1.0.1\",\n \"d3-hierarchy\": \"^1.1.6\",\n \"d3-shape\": \"^1.2.0\",\n \"eslint-plugin-import\": \"^2.13.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.0.3\",\n \"file-loader\": \"^1.1.11\",\n \"font-awesome\": \"^4.7.0\",\n \"immutable\": \"^3.8.1\",\n \"jwt-decode\": \"^2.2.0\",\n \"leaflet\": \"^1.3.1\",\n \"leaflet.markercluster\": \"^1.3.0\",\n \"lodash\": \"^4.17.10\",\n \"material-icons-react\": \"^1.0.0\",\n \"moment\": \"^2.22.2\",\n \"moment-precise-range-plugin\": \"^1.3.0\",\n \"prop-types\": \"^15.6.2\",\n \"react\": \"^16.4.1\",\n \"react-avatar-editor\": \"^11.0.4\",\n \"react-calendar-heatmap\": \"^1.6.3\",\n \"react-content-loader\": \"^3.1.2\",\n \"react-cookie\": \"^2.2.0\",\n \"react-d3-graph\": \"1.2.1\",\n \"react-dimensions\": \"^1.3.0\",\n \"react-dom\": \"^16.4.1\",\n \"react-draggable\": \"^3.0.5\",\n \"react-dropzone\": \"^4.2.12\",\n \"react-grid-gallery\": \"^0.4.11\",\n \"react-grid-layout\": \"^0.16.6\",\n \"react-image-lightbox\": \"https://github.com/hooram/react-image-lightbox\",\n \"react-keydown\": \"^1.9.4\",\n \"react-lazyload\": \"^2.2.7\",\n \"react-leaflet\": \"^1.9.1\",\n \"react-leaflet-markercluster\": \"^1.1.8\",\n \"react-modal\": \"^3.4.5\",\n \"react-placeholder\": \"^3.0.1\",\n \"react-redux\": \"^5.0.5\",\n \"react-router-dom\": \"^4.3.1\",\n \"react-router-redux\": \"^5.0.0-alpha.9\",\n \"react-scripts\": \"^1.1.4\",\n \"react-sortable-tree\": \"^2.2.0\",\n \"react-sortable-tree-theme-file-explorer\": \"^1.1.2\",\n \"react-transition-group\": \"^2.3.1\",\n \"react-virtualized\": \"^9.20.0\",\n \"react-virtualized-item-grid\": \"^1.0.0\",\n \"react-vis\": \"^1.9.4\",\n \"react-visibility-sensor\": \"^3.10.0\",\n \"reapop\": \"^1.2.0\",\n \"reapop-theme-wybo\": \"^1.0.2\",\n \"redux\": \"^4.0.0\",\n \"redux-api-middleware\": \"^2.3.0\",\n \"redux-logger\": \"^3.0.6\",\n \"redux-persist\": \"^5.10.0\",\n \"redux-persist-transform-filter\": \"0.0.16\",\n \"redux-promise-middleware\": \"^5.1.1\",\n \"redux-thunk\": \"^2.3.0\",\n \"rumble-charts\": \"^2.0.0\",\n \"semantic-ui-css\": \"^2.3.2\",\n \"semantic-ui-react\": \"^0.80.2\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n },\n \"proxy\": \"http://192.168.1.100:8000/\",\n \"devDependencies\": {\n \"eslint\": \"^4.19.1\",\n \"eslint-plugin-react\": \"^7.10.0\"\n }\n}\n" }, { "path": "public/index.html", "content": "\n\n \n \n \n \n \n \n \n\n \n \n \n \n\n Ownphotos\n \n \n \n
\n \n \n\n" }, { "path": "public/manifest.json", "content": "{\n \"short_name\": \"Ownphotos\",\n \"name\": \"Ownphotos\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n }\n ],\n \"start_url\": \"./index.html\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n" }, { "path": "run.sh", "content": "#!/usr/bin/env bash\nsed -i \"s@http://192.168.1.100@//${BACKEND_HOST}@g\" src/api_client/apiClient.js\nsed -i \"s@http://192.168.1.100:8000/@http://backend/@g\" package.json\n\n# echo \"building frontend\"\n# npm run build\n# echo \"serving frontend\"\n# serve build -d -l 3000\n\nDANGEROUSLY_DISABLE_HOST_CHECK=true HOST=0.0.0.0 npm start\n\n" }, { "path": "semantic/gulpfile.js", "content": "/*******************************\n Set-up\n*******************************/\n\nvar\n gulp = require('gulp-help')(require('gulp')),\n\n // read user config to know what task to load\n config = require('./tasks/config/user'),\n\n // watch changes\n watch = require('./tasks/watch'),\n\n // build all files\n build = require('./tasks/build'),\n buildJS = require('./tasks/build/javascript'),\n buildCSS = require('./tasks/build/css'),\n buildAssets = require('./tasks/build/assets'),\n\n // utility\n clean = require('./tasks/clean'),\n version = require('./tasks/version'),\n\n // docs tasks\n serveDocs = require('./tasks/docs/serve'),\n buildDocs = require('./tasks/docs/build'),\n\n // rtl\n buildRTL = require('./tasks/rtl/build'),\n watchRTL = require('./tasks/rtl/watch')\n;\n\n\n/*******************************\n Tasks\n*******************************/\n\ngulp.task('default', false, [\n 'watch'\n]);\n\ngulp.task('watch', 'Watch for site/theme changes', watch);\n\ngulp.task('build', 'Builds all files from source', build);\ngulp.task('build-javascript', 'Builds all javascript from source', buildJS);\ngulp.task('build-css', 'Builds all css from source', buildCSS);\ngulp.task('build-assets', 'Copies all assets from source', buildAssets);\n\ngulp.task('clean', 'Clean dist folder', clean);\ngulp.task('version', 'Displays current version of Semantic', version);\n\n/*--------------\n Docs\n---------------*/\n\n/*\n Lets you serve files to a local documentation instance\n https://github.com/Semantic-Org/Semantic-UI-Docs/\n*/\n\ngulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);\ngulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);\n\n\n/*--------------\n RTL\n---------------*/\n\nif(config.rtl) {\n gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);\n gulp.task('build-rtl', 'Build all files as RTL', buildRTL);\n}\n" }, { "path": "semantic/src/definitions/behaviors/api.js", "content": "/*!\n * # Semantic UI - API\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nvar\n window = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.api = $.fn.api = function(parameters) {\n\n var\n // use window context if none specified\n $allModules = $.isFunction(this)\n ? $(window)\n : $(this),\n moduleSelector = $allModules.selector || '',\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n returnedValue\n ;\n\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.api.settings, parameters)\n : $.extend({}, $.fn.api.settings),\n\n // internal aliases\n namespace = settings.namespace,\n metadata = settings.metadata,\n selector = settings.selector,\n error = settings.error,\n className = settings.className,\n\n // define namespaces for modules\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n // element that creates request\n $module = $(this),\n $form = $module.closest(selector.form),\n\n // context used for state\n $context = (settings.stateContext)\n ? $(settings.stateContext)\n : $module,\n\n // request details\n ajaxSettings,\n requestSettings,\n url,\n data,\n requestStartTime,\n\n // standard module\n element = this,\n context = $context[0],\n instance = $module.data(moduleNamespace),\n module\n ;\n\n module = {\n\n initialize: function() {\n if(!methodInvoked) {\n module.bind.events();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, instance)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module for', element);\n $module\n .removeData(moduleNamespace)\n .off(eventNamespace)\n ;\n },\n\n bind: {\n events: function() {\n var\n triggerEvent = module.get.event()\n ;\n if( triggerEvent ) {\n module.verbose('Attaching API events to element', triggerEvent);\n $module\n .on(triggerEvent + eventNamespace, module.event.trigger)\n ;\n }\n else if(settings.on == 'now') {\n module.debug('Querying API endpoint immediately');\n module.query();\n }\n }\n },\n\n decode: {\n json: function(response) {\n if(response !== undefined && typeof response == 'string') {\n try {\n response = JSON.parse(response);\n }\n catch(e) {\n // isnt json string\n }\n }\n return response;\n }\n },\n\n read: {\n cachedResponse: function(url) {\n var\n response\n ;\n if(window.Storage === undefined) {\n module.error(error.noStorage);\n return;\n }\n response = sessionStorage.getItem(url);\n module.debug('Using cached response', url, response);\n response = module.decode.json(response);\n return response;\n }\n },\n write: {\n cachedResponse: function(url, response) {\n if(response && response === '') {\n module.debug('Response empty, not caching', response);\n return;\n }\n if(window.Storage === undefined) {\n module.error(error.noStorage);\n return;\n }\n if( $.isPlainObject(response) ) {\n response = JSON.stringify(response);\n }\n sessionStorage.setItem(url, response);\n module.verbose('Storing cached response for url', url, response);\n }\n },\n\n query: function() {\n\n if(module.is.disabled()) {\n module.debug('Element is disabled API request aborted');\n return;\n }\n\n if(module.is.loading()) {\n if(settings.interruptRequests) {\n module.debug('Interrupting previous request');\n module.abort();\n }\n else {\n module.debug('Cancelling request, previous request is still pending');\n return;\n }\n }\n\n // pass element metadata to url (value, text)\n if(settings.defaultData) {\n $.extend(true, settings.urlData, module.get.defaultData());\n }\n\n // Add form content\n if(settings.serializeForm) {\n settings.data = module.add.formData(settings.data);\n }\n\n // call beforesend and get any settings changes\n requestSettings = module.get.settings();\n\n // check if before send cancelled request\n if(requestSettings === false) {\n module.cancelled = true;\n module.error(error.beforeSend);\n return;\n }\n else {\n module.cancelled = false;\n }\n\n // get url\n url = module.get.templatedURL();\n\n if(!url && !module.is.mocked()) {\n module.error(error.missingURL);\n return;\n }\n\n // replace variables\n url = module.add.urlData( url );\n // missing url parameters\n if( !url && !module.is.mocked()) {\n return;\n }\n\n requestSettings.url = settings.base + url;\n\n // look for jQuery ajax parameters in settings\n ajaxSettings = $.extend(true, {}, settings, {\n type : settings.method || settings.type,\n data : data,\n url : settings.base + url,\n beforeSend : settings.beforeXHR,\n success : function() {},\n failure : function() {},\n complete : function() {}\n });\n\n module.debug('Querying URL', ajaxSettings.url);\n module.verbose('Using AJAX settings', ajaxSettings);\n if(settings.cache === 'local' && module.read.cachedResponse(url)) {\n module.debug('Response returned from local cache');\n module.request = module.create.request();\n module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);\n return;\n }\n\n if( !settings.throttle ) {\n module.debug('Sending request', data, ajaxSettings.method);\n module.send.request();\n }\n else {\n if(!settings.throttleFirstRequest && !module.timer) {\n module.debug('Sending request', data, ajaxSettings.method);\n module.send.request();\n module.timer = setTimeout(function(){}, settings.throttle);\n }\n else {\n module.debug('Throttling request', settings.throttle);\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n if(module.timer) {\n delete module.timer;\n }\n module.debug('Sending throttled request', data, ajaxSettings.method);\n module.send.request();\n }, settings.throttle);\n }\n }\n\n },\n\n should: {\n removeError: function() {\n return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );\n }\n },\n\n is: {\n disabled: function() {\n return ($module.filter(selector.disabled).length > 0);\n },\n expectingJSON: function() {\n return settings.dataType === 'json' || settings.dataType === 'jsonp';\n },\n form: function() {\n return $module.is('form') || $context.is('form');\n },\n mocked: function() {\n return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);\n },\n input: function() {\n return $module.is('input');\n },\n loading: function() {\n return (module.request)\n ? (module.request.state() == 'pending')\n : false\n ;\n },\n abortedRequest: function(xhr) {\n if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {\n module.verbose('XHR request determined to be aborted');\n return true;\n }\n else {\n module.verbose('XHR request was not aborted');\n return false;\n }\n },\n validResponse: function(response) {\n if( (!module.is.expectingJSON()) || !$.isFunction(settings.successTest) ) {\n module.verbose('Response is not JSON, skipping validation', settings.successTest, response);\n return true;\n }\n module.debug('Checking JSON returned success', settings.successTest, response);\n if( settings.successTest(response) ) {\n module.debug('Response passed success test', response);\n return true;\n }\n else {\n module.debug('Response failed success test', response);\n return false;\n }\n }\n },\n\n was: {\n cancelled: function() {\n return (module.cancelled || false);\n },\n succesful: function() {\n return (module.request && module.request.state() == 'resolved');\n },\n failure: function() {\n return (module.request && module.request.state() == 'rejected');\n },\n complete: function() {\n return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );\n }\n },\n\n add: {\n urlData: function(url, urlData) {\n var\n requiredVariables,\n optionalVariables\n ;\n if(url) {\n requiredVariables = url.match(settings.regExp.required);\n optionalVariables = url.match(settings.regExp.optional);\n urlData = urlData || settings.urlData;\n if(requiredVariables) {\n module.debug('Looking for required URL variables', requiredVariables);\n $.each(requiredVariables, function(index, templatedString) {\n var\n // allow legacy {$var} style\n variable = (templatedString.indexOf('$') !== -1)\n ? templatedString.substr(2, templatedString.length - 3)\n : templatedString.substr(1, templatedString.length - 2),\n value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)\n ? urlData[variable]\n : ($module.data(variable) !== undefined)\n ? $module.data(variable)\n : ($context.data(variable) !== undefined)\n ? $context.data(variable)\n : urlData[variable]\n ;\n // remove value\n if(value === undefined) {\n module.error(error.requiredParameter, variable, url);\n url = false;\n return false;\n }\n else {\n module.verbose('Found required variable', variable, value);\n value = (settings.encodeParameters)\n ? module.get.urlEncodedValue(value)\n : value\n ;\n url = url.replace(templatedString, value);\n }\n });\n }\n if(optionalVariables) {\n module.debug('Looking for optional URL variables', requiredVariables);\n $.each(optionalVariables, function(index, templatedString) {\n var\n // allow legacy {/$var} style\n variable = (templatedString.indexOf('$') !== -1)\n ? templatedString.substr(3, templatedString.length - 4)\n : templatedString.substr(2, templatedString.length - 3),\n value = ($.isPlainObject(urlData) && urlData[variable] !== undefined)\n ? urlData[variable]\n : ($module.data(variable) !== undefined)\n ? $module.data(variable)\n : ($context.data(variable) !== undefined)\n ? $context.data(variable)\n : urlData[variable]\n ;\n // optional replacement\n if(value !== undefined) {\n module.verbose('Optional variable Found', variable, value);\n url = url.replace(templatedString, value);\n }\n else {\n module.verbose('Optional variable not found', variable);\n // remove preceding slash if set\n if(url.indexOf('/' + templatedString) !== -1) {\n url = url.replace('/' + templatedString, '');\n }\n else {\n url = url.replace(templatedString, '');\n }\n }\n });\n }\n }\n return url;\n },\n formData: function(data) {\n var\n canSerialize = ($.fn.serializeObject !== undefined),\n formData = (canSerialize)\n ? $form.serializeObject()\n : $form.serialize(),\n hasOtherData\n ;\n data = data || settings.data;\n hasOtherData = $.isPlainObject(data);\n\n if(hasOtherData) {\n if(canSerialize) {\n module.debug('Extending existing data with form data', data, formData);\n data = $.extend(true, {}, data, formData);\n }\n else {\n module.error(error.missingSerialize);\n module.debug('Cant extend data. Replacing data with form data', data, formData);\n data = formData;\n }\n }\n else {\n module.debug('Adding form data', formData);\n data = formData;\n }\n return data;\n }\n },\n\n send: {\n request: function() {\n module.set.loading();\n module.request = module.create.request();\n if( module.is.mocked() ) {\n module.mockedXHR = module.create.mockedXHR();\n }\n else {\n module.xhr = module.create.xhr();\n }\n settings.onRequest.call(context, module.request, module.xhr);\n }\n },\n\n event: {\n trigger: function(event) {\n module.query();\n if(event.type == 'submit' || event.type == 'click') {\n event.preventDefault();\n }\n },\n xhr: {\n always: function() {\n // nothing special\n },\n done: function(response, textStatus, xhr) {\n var\n context = this,\n elapsedTime = (new Date().getTime() - requestStartTime),\n timeLeft = (settings.loadingDuration - elapsedTime),\n translatedResponse = ( $.isFunction(settings.onResponse) )\n ? module.is.expectingJSON()\n ? settings.onResponse.call(context, $.extend(true, {}, response))\n : settings.onResponse.call(context, response)\n : false\n ;\n timeLeft = (timeLeft > 0)\n ? timeLeft\n : 0\n ;\n if(translatedResponse) {\n module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);\n response = translatedResponse;\n }\n if(timeLeft > 0) {\n module.debug('Response completed early delaying state change by', timeLeft);\n }\n setTimeout(function() {\n if( module.is.validResponse(response) ) {\n module.request.resolveWith(context, [response, xhr]);\n }\n else {\n module.request.rejectWith(context, [xhr, 'invalid']);\n }\n }, timeLeft);\n },\n fail: function(xhr, status, httpMessage) {\n var\n context = this,\n elapsedTime = (new Date().getTime() - requestStartTime),\n timeLeft = (settings.loadingDuration - elapsedTime)\n ;\n timeLeft = (timeLeft > 0)\n ? timeLeft\n : 0\n ;\n if(timeLeft > 0) {\n module.debug('Response completed early delaying state change by', timeLeft);\n }\n setTimeout(function() {\n if( module.is.abortedRequest(xhr) ) {\n module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);\n }\n else {\n module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);\n }\n }, timeLeft);\n }\n },\n request: {\n done: function(response, xhr) {\n module.debug('Successful API Response', response);\n if(settings.cache === 'local' && url) {\n module.write.cachedResponse(url, response);\n module.debug('Saving server response locally', module.cache);\n }\n settings.onSuccess.call(context, response, $module, xhr);\n },\n complete: function(firstParameter, secondParameter) {\n var\n xhr,\n response\n ;\n // have to guess callback parameters based on request success\n if( module.was.succesful() ) {\n response = firstParameter;\n xhr = secondParameter;\n }\n else {\n xhr = firstParameter;\n response = module.get.responseFromXHR(xhr);\n }\n module.remove.loading();\n settings.onComplete.call(context, response, $module, xhr);\n },\n fail: function(xhr, status, httpMessage) {\n var\n // pull response from xhr if available\n response = module.get.responseFromXHR(xhr),\n errorMessage = module.get.errorFromRequest(response, status, httpMessage)\n ;\n if(status == 'aborted') {\n module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);\n settings.onAbort.call(context, status, $module, xhr);\n return true;\n }\n else if(status == 'invalid') {\n module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);\n }\n else if(status == 'error') {\n if(xhr !== undefined) {\n module.debug('XHR produced a server error', status, httpMessage);\n // make sure we have an error to display to console\n if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {\n module.error(error.statusMessage + httpMessage, ajaxSettings.url);\n }\n settings.onError.call(context, errorMessage, $module, xhr);\n }\n }\n\n if(settings.errorDuration && status !== 'aborted') {\n module.debug('Adding error state');\n module.set.error();\n if( module.should.removeError() ) {\n setTimeout(module.remove.error, settings.errorDuration);\n }\n }\n module.debug('API Request failed', errorMessage, xhr);\n settings.onFailure.call(context, response, $module, xhr);\n }\n }\n },\n\n create: {\n\n request: function() {\n // api request promise\n return $.Deferred()\n .always(module.event.request.complete)\n .done(module.event.request.done)\n .fail(module.event.request.fail)\n ;\n },\n\n mockedXHR: function () {\n var\n // xhr does not simulate these properties of xhr but must return them\n textStatus = false,\n status = false,\n httpMessage = false,\n responder = settings.mockResponse || settings.response,\n asyncResponder = settings.mockResponseAsync || settings.responseAsync,\n asyncCallback,\n response,\n mockedXHR\n ;\n\n mockedXHR = $.Deferred()\n .always(module.event.xhr.complete)\n .done(module.event.xhr.done)\n .fail(module.event.xhr.fail)\n ;\n\n if(responder) {\n if( $.isFunction(responder) ) {\n module.debug('Using specified synchronous callback', responder);\n response = responder.call(context, requestSettings);\n }\n else {\n module.debug('Using settings specified response', responder);\n response = responder;\n }\n // simulating response\n mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);\n }\n else if( $.isFunction(asyncResponder) ) {\n asyncCallback = function(response) {\n module.debug('Async callback returned response', response);\n\n if(response) {\n mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);\n }\n else {\n mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);\n }\n };\n module.debug('Using specified async response callback', asyncResponder);\n asyncResponder.call(context, requestSettings, asyncCallback);\n }\n return mockedXHR;\n },\n\n xhr: function() {\n var\n xhr\n ;\n // ajax request promise\n xhr = $.ajax(ajaxSettings)\n .always(module.event.xhr.always)\n .done(module.event.xhr.done)\n .fail(module.event.xhr.fail)\n ;\n module.verbose('Created server request', xhr, ajaxSettings);\n return xhr;\n }\n },\n\n set: {\n error: function() {\n module.verbose('Adding error state to element', $context);\n $context.addClass(className.error);\n },\n loading: function() {\n module.verbose('Adding loading state to element', $context);\n $context.addClass(className.loading);\n requestStartTime = new Date().getTime();\n }\n },\n\n remove: {\n error: function() {\n module.verbose('Removing error state from element', $context);\n $context.removeClass(className.error);\n },\n loading: function() {\n module.verbose('Removing loading state from element', $context);\n $context.removeClass(className.loading);\n }\n },\n\n get: {\n responseFromXHR: function(xhr) {\n return $.isPlainObject(xhr)\n ? (module.is.expectingJSON())\n ? module.decode.json(xhr.responseText)\n : xhr.responseText\n : false\n ;\n },\n errorFromRequest: function(response, status, httpMessage) {\n return ($.isPlainObject(response) && response.error !== undefined)\n ? response.error // use json error message\n : (settings.error[status] !== undefined) // use server error message\n ? settings.error[status]\n : httpMessage\n ;\n },\n request: function() {\n return module.request || false;\n },\n xhr: function() {\n return module.xhr || false;\n },\n settings: function() {\n var\n runSettings\n ;\n runSettings = settings.beforeSend.call(context, settings);\n if(runSettings) {\n if(runSettings.success !== undefined) {\n module.debug('Legacy success callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.success);\n runSettings.onSuccess = runSettings.success;\n }\n if(runSettings.failure !== undefined) {\n module.debug('Legacy failure callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.failure);\n runSettings.onFailure = runSettings.failure;\n }\n if(runSettings.complete !== undefined) {\n module.debug('Legacy complete callback detected', runSettings);\n module.error(error.legacyParameters, runSettings.complete);\n runSettings.onComplete = runSettings.complete;\n }\n }\n if(runSettings === undefined) {\n module.error(error.noReturnedValue);\n }\n if(runSettings === false) {\n return runSettings;\n }\n return (runSettings !== undefined)\n ? $.extend(true, {}, runSettings)\n : $.extend(true, {}, settings)\n ;\n },\n urlEncodedValue: function(value) {\n var\n decodedValue = window.decodeURIComponent(value),\n encodedValue = window.encodeURIComponent(value),\n alreadyEncoded = (decodedValue !== value)\n ;\n if(alreadyEncoded) {\n module.debug('URL value is already encoded, avoiding double encoding', value);\n return value;\n }\n module.verbose('Encoding value using encodeURIComponent', value, encodedValue);\n return encodedValue;\n },\n defaultData: function() {\n var\n data = {}\n ;\n if( !$.isWindow(element) ) {\n if( module.is.input() ) {\n data.value = $module.val();\n }\n else if( module.is.form() ) {\n\n }\n else {\n data.text = $module.text();\n }\n }\n return data;\n },\n event: function() {\n if( $.isWindow(element) || settings.on == 'now' ) {\n module.debug('API called without element, no events attached');\n return false;\n }\n else if(settings.on == 'auto') {\n if( $module.is('input') ) {\n return (element.oninput !== undefined)\n ? 'input'\n : (element.onpropertychange !== undefined)\n ? 'propertychange'\n : 'keyup'\n ;\n }\n else if( $module.is('form') ) {\n return 'submit';\n }\n else {\n return 'click';\n }\n }\n else {\n return settings.on;\n }\n },\n templatedURL: function(action) {\n action = action || $module.data(metadata.action) || settings.action || false;\n url = $module.data(metadata.url) || settings.url || false;\n if(url) {\n module.debug('Using specified url', url);\n return url;\n }\n if(action) {\n module.debug('Looking up url for action', action, settings.api);\n if(settings.api[action] === undefined && !module.is.mocked()) {\n module.error(error.missingAction, settings.action, settings.api);\n return;\n }\n url = settings.api[action];\n }\n else if( module.is.form() ) {\n url = $module.attr('action') || $context.attr('action') || false;\n module.debug('No url or action specified, defaulting to form action', url);\n }\n return url;\n }\n },\n\n abort: function() {\n var\n xhr = module.get.xhr()\n ;\n if( xhr && xhr.state() !== 'resolved') {\n module.debug('Cancelling API request');\n xhr.abort();\n }\n },\n\n // reset state\n reset: function() {\n module.remove.error();\n module.remove.loading();\n },\n\n setting: function(name, value) {\n module.debug('Changing setting', name, value);\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n if($.isPlainObject(settings[name])) {\n $.extend(true, settings[name], value);\n }\n else {\n settings[name] = value;\n }\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n //'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.api.settings = {\n\n name : 'API',\n namespace : 'api',\n\n debug : false,\n verbose : false,\n performance : true,\n\n // object containing all templates endpoints\n api : {},\n\n // whether to cache responses\n cache : true,\n\n // whether new requests should abort previous requests\n interruptRequests : true,\n\n // event binding\n on : 'auto',\n\n // context for applying state classes\n stateContext : false,\n\n // duration for loading state\n loadingDuration : 0,\n\n // whether to hide errors after a period of time\n hideError : 'auto',\n\n // duration for error state\n errorDuration : 2000,\n\n // whether parameters should be encoded with encodeURIComponent\n encodeParameters : true,\n\n // API action to use\n action : false,\n\n // templated URL to use\n url : false,\n\n // base URL to apply to all endpoints\n base : '',\n\n // data that will\n urlData : {},\n\n // whether to add default data to url data\n defaultData : true,\n\n // whether to serialize closest form\n serializeForm : false,\n\n // how long to wait before request should occur\n throttle : 0,\n\n // whether to throttle first request or only repeated\n throttleFirstRequest : true,\n\n // standard ajax settings\n method : 'get',\n data : {},\n dataType : 'json',\n\n // mock response\n mockResponse : false,\n mockResponseAsync : false,\n\n // aliases for mock\n response : false,\n responseAsync : false,\n\n // callbacks before request\n beforeSend : function(settings) { return settings; },\n beforeXHR : function(xhr) {},\n onRequest : function(promise, xhr) {},\n\n // after request\n onResponse : false, // function(response) { },\n\n // response was successful, if JSON passed validation\n onSuccess : function(response, $module) {},\n\n // request finished without aborting\n onComplete : function(response, $module) {},\n\n // failed JSON success test\n onFailure : function(response, $module) {},\n\n // server error\n onError : function(errorMessage, $module) {},\n\n // request aborted\n onAbort : function(errorMessage, $module) {},\n\n successTest : false,\n\n // errors\n error : {\n beforeSend : 'The before send function has aborted the request',\n error : 'There was an error with your request',\n exitConditions : 'API Request Aborted. Exit conditions met',\n JSONParse : 'JSON could not be parsed during error handling',\n legacyParameters : 'You are using legacy API success callback names',\n method : 'The method you called is not defined',\n missingAction : 'API action used but no url was defined',\n missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',\n missingURL : 'No URL specified for api event',\n noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',\n noStorage : 'Caching responses locally requires session storage',\n parseError : 'There was an error parsing your request',\n requiredParameter : 'Missing a required URL parameter: ',\n statusMessage : 'Server gave an error: ',\n timeout : 'Your request timed out'\n },\n\n regExp : {\n required : /\\{\\$*[A-z0-9]+\\}/g,\n optional : /\\{\\/\\$*[A-z0-9]+\\}/g,\n },\n\n className: {\n loading : 'loading',\n error : 'error'\n },\n\n selector: {\n disabled : '.disabled',\n form : 'form'\n },\n\n metadata: {\n action : 'action',\n url : 'url'\n }\n};\n\n\n\n})( jQuery, window, document );\n" }, { "path": "semantic/src/definitions/behaviors/form.js", "content": "/*!\n * # Semantic UI - Form Validation\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.form = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n legacyParameters = arguments[1],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue\n ;\n $allModules\n .each(function() {\n var\n $module = $(this),\n element = this,\n\n formErrors = [],\n keyHeldDown = false,\n\n // set at run-time\n $field,\n $group,\n $message,\n $prompt,\n $submit,\n $clear,\n $reset,\n\n settings,\n validation,\n\n metadata,\n selector,\n className,\n regExp,\n error,\n\n namespace,\n moduleNamespace,\n eventNamespace,\n\n instance,\n module\n ;\n\n module = {\n\n initialize: function() {\n\n // settings grabbed at run time\n module.get.settings();\n if(methodInvoked) {\n if(instance === undefined) {\n module.instantiate();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.verbose('Initializing form validation', $module, settings);\n module.bindEvents();\n module.set.defaults();\n module.instantiate();\n }\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module', instance);\n module.removeEvents();\n $module\n .removeData(moduleNamespace)\n ;\n },\n\n refresh: function() {\n module.verbose('Refreshing selector cache');\n $field = $module.find(selector.field);\n $group = $module.find(selector.group);\n $message = $module.find(selector.message);\n $prompt = $module.find(selector.prompt);\n\n $submit = $module.find(selector.submit);\n $clear = $module.find(selector.clear);\n $reset = $module.find(selector.reset);\n },\n\n submit: function() {\n module.verbose('Submitting form', $module);\n $module\n .submit()\n ;\n },\n\n attachEvents: function(selector, action) {\n action = action || 'submit';\n $(selector)\n .on('click' + eventNamespace, function(event) {\n module[action]();\n event.preventDefault();\n })\n ;\n },\n\n bindEvents: function() {\n module.verbose('Attaching form events');\n $module\n .on('submit' + eventNamespace, module.validate.form)\n .on('blur' + eventNamespace, selector.field, module.event.field.blur)\n .on('click' + eventNamespace, selector.submit, module.submit)\n .on('click' + eventNamespace, selector.reset, module.reset)\n .on('click' + eventNamespace, selector.clear, module.clear)\n ;\n if(settings.keyboardShortcuts) {\n $module\n .on('keydown' + eventNamespace, selector.field, module.event.field.keydown)\n ;\n }\n $field\n .each(function() {\n var\n $input = $(this),\n type = $input.prop('type'),\n inputEvent = module.get.changeEvent(type, $input)\n ;\n $(this)\n .on(inputEvent + eventNamespace, module.event.field.change)\n ;\n })\n ;\n },\n\n clear: function() {\n $field\n .each(function () {\n var\n $field = $(this),\n $element = $field.parent(),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.find(selector.prompt),\n defaultValue = $field.data(metadata.defaultValue) || '',\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isErrored = $fieldGroup.hasClass(className.error)\n ;\n if(isErrored) {\n module.verbose('Resetting error on field', $fieldGroup);\n $fieldGroup.removeClass(className.error);\n $prompt.remove();\n }\n if(isDropdown) {\n module.verbose('Resetting dropdown value', $element, defaultValue);\n $element.dropdown('clear');\n }\n else if(isCheckbox) {\n $field.prop('checked', false);\n }\n else {\n module.verbose('Resetting field value', $field, defaultValue);\n $field.val('');\n }\n })\n ;\n },\n\n reset: function() {\n $field\n .each(function () {\n var\n $field = $(this),\n $element = $field.parent(),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.find(selector.prompt),\n defaultValue = $field.data(metadata.defaultValue),\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isErrored = $fieldGroup.hasClass(className.error)\n ;\n if(defaultValue === undefined) {\n return;\n }\n if(isErrored) {\n module.verbose('Resetting error on field', $fieldGroup);\n $fieldGroup.removeClass(className.error);\n $prompt.remove();\n }\n if(isDropdown) {\n module.verbose('Resetting dropdown value', $element, defaultValue);\n $element.dropdown('restore defaults');\n }\n else if(isCheckbox) {\n module.verbose('Resetting checkbox value', $element, defaultValue);\n $field.prop('checked', defaultValue);\n }\n else {\n module.verbose('Resetting field value', $field, defaultValue);\n $field.val(defaultValue);\n }\n })\n ;\n },\n\n determine: {\n isValid: function() {\n var\n allValid = true\n ;\n $.each(validation, function(fieldName, field) {\n if( !( module.validate.field(field, fieldName, true) ) ) {\n allValid = false;\n }\n });\n return allValid;\n }\n },\n\n is: {\n bracketedRule: function(rule) {\n return (rule.type && rule.type.match(settings.regExp.bracket));\n },\n shorthandFields: function(fields) {\n var\n fieldKeys = Object.keys(fields),\n firstRule = fields[fieldKeys[0]]\n ;\n return module.is.shorthandRules(firstRule);\n },\n // duck type rule test\n shorthandRules: function(rules) {\n return (typeof rules == 'string' || $.isArray(rules));\n },\n empty: function($field) {\n if(!$field || $field.length === 0) {\n return true;\n }\n else if($field.is('input[type=\"checkbox\"]')) {\n return !$field.is(':checked');\n }\n else {\n return module.is.blank($field);\n }\n },\n blank: function($field) {\n return $.trim($field.val()) === '';\n },\n valid: function(field) {\n var\n allValid = true\n ;\n if(field) {\n module.verbose('Checking if field is valid', field);\n return module.validate.field(validation[field], field, false);\n }\n else {\n module.verbose('Checking if form is valid');\n $.each(validation, function(fieldName, field) {\n if( !module.is.valid(fieldName) ) {\n allValid = false;\n }\n });\n return allValid;\n }\n }\n },\n\n removeEvents: function() {\n $module\n .off(eventNamespace)\n ;\n $field\n .off(eventNamespace)\n ;\n $submit\n .off(eventNamespace)\n ;\n $field\n .off(eventNamespace)\n ;\n },\n\n event: {\n field: {\n keydown: function(event) {\n var\n $field = $(this),\n key = event.which,\n isInput = $field.is(selector.input),\n isCheckbox = $field.is(selector.checkbox),\n isInDropdown = ($field.closest(selector.uiDropdown).length > 0),\n keyCode = {\n enter : 13,\n escape : 27\n }\n ;\n if( key == keyCode.escape) {\n module.verbose('Escape key pressed blurring field');\n $field\n .blur()\n ;\n }\n if(!event.ctrlKey && key == keyCode.enter && isInput && !isInDropdown && !isCheckbox) {\n if(!keyHeldDown) {\n $field\n .one('keyup' + eventNamespace, module.event.field.keyup)\n ;\n module.submit();\n module.debug('Enter pressed on input submitting form');\n }\n keyHeldDown = true;\n }\n },\n keyup: function() {\n keyHeldDown = false;\n },\n blur: function(event) {\n var\n $field = $(this),\n $fieldGroup = $field.closest($group),\n validationRules = module.get.validation($field)\n ;\n if( $fieldGroup.hasClass(className.error) ) {\n module.debug('Revalidating field', $field, validationRules);\n if(validationRules) {\n module.validate.field( validationRules );\n }\n }\n else if(settings.on == 'blur') {\n if(validationRules) {\n module.validate.field( validationRules );\n }\n }\n },\n change: function(event) {\n var\n $field = $(this),\n $fieldGroup = $field.closest($group),\n validationRules = module.get.validation($field)\n ;\n if(validationRules && (settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) {\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n module.debug('Revalidating field', $field, module.get.validation($field));\n module.validate.field( validationRules );\n }, settings.delay);\n }\n }\n }\n\n },\n\n get: {\n ancillaryValue: function(rule) {\n if(!rule.type || (!rule.value && !module.is.bracketedRule(rule))) {\n return false;\n }\n return (rule.value !== undefined)\n ? rule.value\n : rule.type.match(settings.regExp.bracket)[1] + ''\n ;\n },\n ruleName: function(rule) {\n if( module.is.bracketedRule(rule) ) {\n return rule.type.replace(rule.type.match(settings.regExp.bracket)[0], '');\n }\n return rule.type;\n },\n changeEvent: function(type, $input) {\n if(type == 'checkbox' || type == 'radio' || type == 'hidden' || $input.is('select')) {\n return 'change';\n }\n else {\n return module.get.inputEvent();\n }\n },\n inputEvent: function() {\n return (document.createElement('input').oninput !== undefined)\n ? 'input'\n : (document.createElement('input').onpropertychange !== undefined)\n ? 'propertychange'\n : 'keyup'\n ;\n },\n fieldsFromShorthand: function(fields) {\n var\n fullFields = {}\n ;\n $.each(fields, function(name, rules) {\n if(typeof rules == 'string') {\n rules = [rules];\n }\n fullFields[name] = {\n rules: []\n };\n $.each(rules, function(index, rule) {\n fullFields[name].rules.push({ type: rule });\n });\n });\n return fullFields;\n },\n prompt: function(rule, field) {\n var\n ruleName = module.get.ruleName(rule),\n ancillary = module.get.ancillaryValue(rule),\n $field = module.get.field(field.identifier),\n value = $field.val(),\n prompt = $.isFunction(rule.prompt)\n ? rule.prompt(value)\n : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,\n requiresValue = (prompt.search('{value}') !== -1),\n requiresName = (prompt.search('{name}') !== -1),\n $label,\n name\n ;\n if(requiresValue) {\n prompt = prompt.replace('{value}', $field.val());\n }\n if(requiresName) {\n $label = $field.closest(selector.group).find('label').eq(0);\n name = ($label.length == 1)\n ? $label.text()\n : $field.prop('placeholder') || settings.text.unspecifiedField\n ;\n prompt = prompt.replace('{name}', name);\n }\n prompt = prompt.replace('{identifier}', field.identifier);\n prompt = prompt.replace('{ruleValue}', ancillary);\n if(!rule.prompt) {\n module.verbose('Using default validation prompt for type', prompt, ruleName);\n }\n return prompt;\n },\n settings: function() {\n if($.isPlainObject(parameters)) {\n var\n keys = Object.keys(parameters),\n isLegacySettings = (keys.length > 0)\n ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined)\n : false,\n ruleKeys\n ;\n if(isLegacySettings) {\n // 1.x (ducktyped)\n settings = $.extend(true, {}, $.fn.form.settings, legacyParameters);\n validation = $.extend({}, $.fn.form.settings.defaults, parameters);\n module.error(settings.error.oldSyntax, element);\n module.verbose('Extending settings from legacy parameters', validation, settings);\n }\n else {\n // 2.x\n if(parameters.fields && module.is.shorthandFields(parameters.fields)) {\n parameters.fields = module.get.fieldsFromShorthand(parameters.fields);\n }\n settings = $.extend(true, {}, $.fn.form.settings, parameters);\n validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);\n module.verbose('Extending settings', validation, settings);\n }\n }\n else {\n settings = $.fn.form.settings;\n validation = $.fn.form.settings.defaults;\n module.verbose('Using default form validation', validation, settings);\n }\n\n // shorthand\n namespace = settings.namespace;\n metadata = settings.metadata;\n selector = settings.selector;\n className = settings.className;\n regExp = settings.regExp;\n error = settings.error;\n moduleNamespace = 'module-' + namespace;\n eventNamespace = '.' + namespace;\n\n // grab instance\n instance = $module.data(moduleNamespace);\n\n // refresh selector cache\n module.refresh();\n },\n field: function(identifier) {\n module.verbose('Finding field with identifier', identifier);\n identifier = module.escape.string(identifier);\n if($field.filter('#' + identifier).length > 0 ) {\n return $field.filter('#' + identifier);\n }\n else if( $field.filter('[name=\"' + identifier +'\"]').length > 0 ) {\n return $field.filter('[name=\"' + identifier +'\"]');\n }\n else if( $field.filter('[name=\"' + identifier +'[]\"]').length > 0 ) {\n return $field.filter('[name=\"' + identifier +'[]\"]');\n }\n else if( $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]').length > 0 ) {\n return $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]');\n }\n return $('');\n },\n fields: function(fields) {\n var\n $fields = $()\n ;\n $.each(fields, function(index, name) {\n $fields = $fields.add( module.get.field(name) );\n });\n return $fields;\n },\n validation: function($field) {\n var\n fieldValidation,\n identifier\n ;\n if(!validation) {\n return false;\n }\n $.each(validation, function(fieldName, field) {\n identifier = field.identifier || fieldName;\n if( module.get.field(identifier)[0] == $field[0] ) {\n field.identifier = identifier;\n fieldValidation = field;\n }\n });\n return fieldValidation || false;\n },\n value: function (field) {\n var\n fields = [],\n results\n ;\n fields.push(field);\n results = module.get.values.call(element, fields);\n return results[field];\n },\n values: function (fields) {\n var\n $fields = $.isArray(fields)\n ? module.get.fields(fields)\n : $field,\n values = {}\n ;\n $fields.each(function(index, field) {\n var\n $field = $(field),\n type = $field.prop('type'),\n name = $field.prop('name'),\n value = $field.val(),\n isCheckbox = $field.is(selector.checkbox),\n isRadio = $field.is(selector.radio),\n isMultiple = (name.indexOf('[]') !== -1),\n isChecked = (isCheckbox)\n ? $field.is(':checked')\n : false\n ;\n if(name) {\n if(isMultiple) {\n name = name.replace('[]', '');\n if(!values[name]) {\n values[name] = [];\n }\n if(isCheckbox) {\n if(isChecked) {\n values[name].push(value || true);\n }\n else {\n values[name].push(false);\n }\n }\n else {\n values[name].push(value);\n }\n }\n else {\n if(isRadio) {\n if(values[name] === undefined || values[name] == false) {\n values[name] = (isChecked)\n ? value || true\n : false\n ;\n }\n }\n else if(isCheckbox) {\n if(isChecked) {\n values[name] = value || true;\n }\n else {\n values[name] = false;\n }\n }\n else {\n values[name] = value;\n }\n }\n }\n });\n return values;\n }\n },\n\n has: {\n\n field: function(identifier) {\n module.verbose('Checking for existence of a field with identifier', identifier);\n identifier = module.escape.string(identifier);\n if(typeof identifier !== 'string') {\n module.error(error.identifier, identifier);\n }\n if($field.filter('#' + identifier).length > 0 ) {\n return true;\n }\n else if( $field.filter('[name=\"' + identifier +'\"]').length > 0 ) {\n return true;\n }\n else if( $field.filter('[data-' + metadata.validate + '=\"'+ identifier +'\"]').length > 0 ) {\n return true;\n }\n return false;\n }\n\n },\n\n escape: {\n string: function(text) {\n text = String(text);\n return text.replace(regExp.escape, '\\\\$&');\n }\n },\n\n add: {\n // alias\n rule: function(name, rules) {\n module.add.field(name, rules);\n },\n field: function(name, rules) {\n var\n newValidation = {}\n ;\n if(module.is.shorthandRules(rules)) {\n rules = $.isArray(rules)\n ? rules\n : [rules]\n ;\n newValidation[name] = {\n rules: []\n };\n $.each(rules, function(index, rule) {\n newValidation[name].rules.push({ type: rule });\n });\n }\n else {\n newValidation[name] = rules;\n }\n validation = $.extend({}, validation, newValidation);\n module.debug('Adding rules', newValidation, validation);\n },\n fields: function(fields) {\n var\n newValidation\n ;\n if(fields && module.is.shorthandFields(fields)) {\n newValidation = module.get.fieldsFromShorthand(fields);\n }\n else {\n newValidation = fields;\n }\n validation = $.extend({}, validation, newValidation);\n },\n prompt: function(identifier, errors) {\n var\n $field = module.get.field(identifier),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.children(selector.prompt),\n promptExists = ($prompt.length !== 0)\n ;\n errors = (typeof errors == 'string')\n ? [errors]\n : errors\n ;\n module.verbose('Adding field error state', identifier);\n $fieldGroup\n .addClass(className.error)\n ;\n if(settings.inline) {\n if(!promptExists) {\n $prompt = settings.templates.prompt(errors);\n $prompt\n .appendTo($fieldGroup)\n ;\n }\n $prompt\n .html(errors[0])\n ;\n if(!promptExists) {\n if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {\n module.verbose('Displaying error with css transition', settings.transition);\n $prompt.transition(settings.transition + ' in', settings.duration);\n }\n else {\n module.verbose('Displaying error with fallback javascript animation');\n $prompt\n .fadeIn(settings.duration)\n ;\n }\n }\n else {\n module.verbose('Inline errors are disabled, no inline error added', identifier);\n }\n }\n },\n errors: function(errors) {\n module.debug('Adding form error messages', errors);\n module.set.error();\n $message\n .html( settings.templates.error(errors) )\n ;\n }\n },\n\n remove: {\n rule: function(field, rule) {\n var\n rules = $.isArray(rule)\n ? rule\n : [rule]\n ;\n if(rule == undefined) {\n module.debug('Removed all rules');\n validation[field].rules = [];\n return;\n }\n if(validation[field] == undefined || !$.isArray(validation[field].rules)) {\n return;\n }\n $.each(validation[field].rules, function(index, rule) {\n if(rules.indexOf(rule.type) !== -1) {\n module.debug('Removed rule', rule.type);\n validation[field].rules.splice(index, 1);\n }\n });\n },\n field: function(field) {\n var\n fields = $.isArray(field)\n ? field\n : [field]\n ;\n $.each(fields, function(index, field) {\n module.remove.rule(field);\n });\n },\n // alias\n rules: function(field, rules) {\n if($.isArray(field)) {\n $.each(fields, function(index, field) {\n module.remove.rule(field, rules);\n });\n }\n else {\n module.remove.rule(field, rules);\n }\n },\n fields: function(fields) {\n module.remove.field(fields);\n },\n prompt: function(identifier) {\n var\n $field = module.get.field(identifier),\n $fieldGroup = $field.closest($group),\n $prompt = $fieldGroup.children(selector.prompt)\n ;\n $fieldGroup\n .removeClass(className.error)\n ;\n if(settings.inline && $prompt.is(':visible')) {\n module.verbose('Removing prompt for field', identifier);\n if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {\n $prompt.transition(settings.transition + ' out', settings.duration, function() {\n $prompt.remove();\n });\n }\n else {\n $prompt\n .fadeOut(settings.duration, function(){\n $prompt.remove();\n })\n ;\n }\n }\n }\n },\n\n set: {\n success: function() {\n $module\n .removeClass(className.error)\n .addClass(className.success)\n ;\n },\n defaults: function () {\n $field\n .each(function () {\n var\n $field = $(this),\n isCheckbox = ($field.filter(selector.checkbox).length > 0),\n value = (isCheckbox)\n ? $field.is(':checked')\n : $field.val()\n ;\n $field.data(metadata.defaultValue, value);\n })\n ;\n },\n error: function() {\n $module\n .removeClass(className.success)\n .addClass(className.error)\n ;\n },\n value: function (field, value) {\n var\n fields = {}\n ;\n fields[field] = value;\n return module.set.values.call(element, fields);\n },\n values: function (fields) {\n if($.isEmptyObject(fields)) {\n return;\n }\n $.each(fields, function(key, value) {\n var\n $field = module.get.field(key),\n $element = $field.parent(),\n isMultiple = $.isArray(value),\n isCheckbox = $element.is(selector.uiCheckbox),\n isDropdown = $element.is(selector.uiDropdown),\n isRadio = ($field.is(selector.radio) && isCheckbox),\n fieldExists = ($field.length > 0),\n $multipleField\n ;\n if(fieldExists) {\n if(isMultiple && isCheckbox) {\n module.verbose('Selecting multiple', value, $field);\n $element.checkbox('uncheck');\n $.each(value, function(index, value) {\n $multipleField = $field.filter('[value=\"' + value + '\"]');\n $element = $multipleField.parent();\n if($multipleField.length > 0) {\n $element.checkbox('check');\n }\n });\n }\n else if(isRadio) {\n module.verbose('Selecting radio value', value, $field);\n $field.filter('[value=\"' + value + '\"]')\n .parent(selector.uiCheckbox)\n .checkbox('check')\n ;\n }\n else if(isCheckbox) {\n module.verbose('Setting checkbox value', value, $element);\n if(value === true) {\n $element.checkbox('check');\n }\n else {\n $element.checkbox('uncheck');\n }\n }\n else if(isDropdown) {\n module.verbose('Setting dropdown value', value, $element);\n $element.dropdown('set selected', value);\n }\n else {\n module.verbose('Setting field value', value, $field);\n $field.val(value);\n }\n }\n });\n }\n },\n\n validate: {\n\n form: function(event, ignoreCallbacks) {\n var\n values = module.get.values(),\n apiRequest\n ;\n\n // input keydown event will fire submit repeatedly by browser default\n if(keyHeldDown) {\n return false;\n }\n\n // reset errors\n formErrors = [];\n if( module.determine.isValid() ) {\n module.debug('Form has no validation errors, submitting');\n module.set.success();\n if(ignoreCallbacks !== true) {\n return settings.onSuccess.call(element, event, values);\n }\n }\n else {\n module.debug('Form has errors');\n module.set.error();\n if(!settings.inline) {\n module.add.errors(formErrors);\n }\n // prevent ajax submit\n if($module.data('moduleApi') !== undefined) {\n event.stopImmediatePropagation();\n }\n if(ignoreCallbacks !== true) {\n return settings.onFailure.call(element, formErrors, values);\n }\n }\n },\n\n // takes a validation object and returns whether field passes validation\n field: function(field, fieldName, showErrors) {\n showErrors = (showErrors !== undefined)\n ? showErrors\n : true\n ;\n if(typeof field == 'string') {\n module.verbose('Validating field', field);\n fieldName = field;\n field = validation[field];\n }\n var\n identifier = field.identifier || fieldName,\n $field = module.get.field(identifier),\n $dependsField = (field.depends)\n ? module.get.field(field.depends)\n : false,\n fieldValid = true,\n fieldErrors = []\n ;\n if(!field.identifier) {\n module.debug('Using field name as identifier', identifier);\n field.identifier = identifier;\n }\n if($field.prop('disabled')) {\n module.debug('Field is disabled. Skipping', identifier);\n fieldValid = true;\n }\n else if(field.optional && module.is.blank($field)){\n module.debug('Field is optional and blank. Skipping', identifier);\n fieldValid = true;\n }\n else if(field.depends && module.is.empty($dependsField)) {\n module.debug('Field depends on another value that is not present or empty. Skipping', $dependsField);\n fieldValid = true;\n }\n else if(field.rules !== undefined) {\n $.each(field.rules, function(index, rule) {\n if( module.has.field(identifier) && !( module.validate.rule(field, rule) ) ) {\n module.debug('Field is invalid', identifier, rule.type);\n fieldErrors.push(module.get.prompt(rule, field));\n fieldValid = false;\n }\n });\n }\n if(fieldValid) {\n if(showErrors) {\n module.remove.prompt(identifier, fieldErrors);\n settings.onValid.call($field);\n }\n }\n else {\n if(showErrors) {\n formErrors = formErrors.concat(fieldErrors);\n module.add.prompt(identifier, fieldErrors);\n settings.onInvalid.call($field, fieldErrors);\n }\n return false;\n }\n return true;\n },\n\n // takes validation rule and returns whether field passes rule\n rule: function(field, rule) {\n var\n $field = module.get.field(field.identifier),\n type = rule.type,\n value = $field.val(),\n isValid = true,\n ancillary = module.get.ancillaryValue(rule),\n ruleName = module.get.ruleName(rule),\n ruleFunction = settings.rules[ruleName]\n ;\n if( !$.isFunction(ruleFunction) ) {\n module.error(error.noRule, ruleName);\n return;\n }\n // cast to string avoiding encoding special values\n value = (value === undefined || value === '' || value === null)\n ? ''\n : $.trim(value + '')\n ;\n return ruleFunction.call($field, value, ancillary);\n }\n },\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if($allModules.length > 1) {\n title += ' ' + '(' + $allModules.length + ')';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n return false;\n }\n });\n }\n if( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n module.initialize();\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.form.settings = {\n\n name : 'Form',\n namespace : 'form',\n\n debug : false,\n verbose : false,\n performance : true,\n\n fields : false,\n\n keyboardShortcuts : true,\n on : 'submit',\n inline : false,\n\n delay : 200,\n revalidate : true,\n\n transition : 'scale',\n duration : 200,\n\n onValid : function() {},\n onInvalid : function() {},\n onSuccess : function() { return true; },\n onFailure : function() { return false; },\n\n metadata : {\n defaultValue : 'default',\n validate : 'validate'\n },\n\n regExp: {\n htmlID : /^[a-zA-Z][\\w:.-]*$/g,\n bracket : /\\[(.*)\\]/i,\n decimal : /^\\d+\\.?\\d*$/,\n email : /^[a-z0-9!#$%&'*+\\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i,\n escape : /[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\\^\\$\\|]/g,\n flags : /^\\/(.*)\\/(.*)?/,\n integer : /^\\-?\\d+$/,\n number : /^\\-?\\d*(\\.\\d+)?$/,\n url : /(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,})/i\n },\n\n text: {\n unspecifiedRule : 'Please enter a valid value',\n unspecifiedField : 'This field'\n },\n\n prompt: {\n empty : '{name} must have a value',\n checked : '{name} must be checked',\n email : '{name} must be a valid e-mail',\n url : '{name} must be a valid url',\n regExp : '{name} is not formatted correctly',\n integer : '{name} must be an integer',\n decimal : '{name} must be a decimal number',\n number : '{name} must be set to a number',\n is : '{name} must be \"{ruleValue}\"',\n isExactly : '{name} must be exactly \"{ruleValue}\"',\n not : '{name} cannot be set to \"{ruleValue}\"',\n notExactly : '{name} cannot be set to exactly \"{ruleValue}\"',\n contain : '{name} must contain \"{ruleValue}\"',\n containExactly : '{name} must contain exactly \"{ruleValue}\"',\n doesntContain : '{name} cannot contain \"{ruleValue}\"',\n doesntContainExactly : '{name} cannot contain exactly \"{ruleValue}\"',\n minLength : '{name} must be at least {ruleValue} characters',\n length : '{name} must be at least {ruleValue} characters',\n exactLength : '{name} must be exactly {ruleValue} characters',\n maxLength : '{name} cannot be longer than {ruleValue} characters',\n match : '{name} must match {ruleValue} field',\n different : '{name} must have a different value than {ruleValue} field',\n creditCard : '{name} must be a valid credit card number',\n minCount : '{name} must have at least {ruleValue} choices',\n exactCount : '{name} must have exactly {ruleValue} choices',\n maxCount : '{name} must have {ruleValue} or less choices'\n },\n\n selector : {\n checkbox : 'input[type=\"checkbox\"], input[type=\"radio\"]',\n clear : '.clear',\n field : 'input, textarea, select',\n group : '.field',\n input : 'input',\n message : '.error.message',\n prompt : '.prompt.label',\n radio : 'input[type=\"radio\"]',\n reset : '.reset:not([type=\"reset\"])',\n submit : '.submit:not([type=\"submit\"])',\n uiCheckbox : '.ui.checkbox',\n uiDropdown : '.ui.dropdown'\n },\n\n className : {\n error : 'error',\n label : 'ui prompt label',\n pressed : 'down',\n success : 'success'\n },\n\n error: {\n identifier : 'You must specify a string identifier for each field',\n method : 'The method you called is not defined.',\n noRule : 'There is no rule matching the one you specified',\n oldSyntax : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.'\n },\n\n templates: {\n\n // template that produces error message\n error: function(errors) {\n var\n html = '';\n return $(html);\n },\n\n // template that produces label\n prompt: function(errors) {\n return $('
')\n .addClass('ui basic red pointing prompt label')\n .html(errors[0])\n ;\n }\n },\n\n rules: {\n\n // is not empty or blank string\n empty: function(value) {\n return !(value === undefined || '' === value || $.isArray(value) && value.length === 0);\n },\n\n // checkbox checked\n checked: function() {\n return ($(this).filter(':checked').length > 0);\n },\n\n // is most likely an email\n email: function(value){\n return $.fn.form.settings.regExp.email.test(value);\n },\n\n // value is most likely url\n url: function(value) {\n return $.fn.form.settings.regExp.url.test(value);\n },\n\n // matches specified regExp\n regExp: function(value, regExp) {\n if(regExp instanceof RegExp) {\n return value.match(regExp);\n }\n var\n regExpParts = regExp.match($.fn.form.settings.regExp.flags),\n flags\n ;\n // regular expression specified as /baz/gi (flags)\n if(regExpParts) {\n regExp = (regExpParts.length >= 2)\n ? regExpParts[1]\n : regExp\n ;\n flags = (regExpParts.length >= 3)\n ? regExpParts[2]\n : ''\n ;\n }\n return value.match( new RegExp(regExp, flags) );\n },\n\n // is valid integer or matches range\n integer: function(value, range) {\n var\n intRegExp = $.fn.form.settings.regExp.integer,\n min,\n max,\n parts\n ;\n if( !range || ['', '..'].indexOf(range) !== -1) {\n // do nothing\n }\n else if(range.indexOf('..') == -1) {\n if(intRegExp.test(range)) {\n min = max = range - 0;\n }\n }\n else {\n parts = range.split('..', 2);\n if(intRegExp.test(parts[0])) {\n min = parts[0] - 0;\n }\n if(intRegExp.test(parts[1])) {\n max = parts[1] - 0;\n }\n }\n return (\n intRegExp.test(value) &&\n (min === undefined || value >= min) &&\n (max === undefined || value <= max)\n );\n },\n\n // is valid number (with decimal)\n decimal: function(value) {\n return $.fn.form.settings.regExp.decimal.test(value);\n },\n\n // is valid number\n number: function(value) {\n return $.fn.form.settings.regExp.number.test(value);\n },\n\n // is value (case insensitive)\n is: function(value, text) {\n text = (typeof text == 'string')\n ? text.toLowerCase()\n : text\n ;\n value = (typeof value == 'string')\n ? value.toLowerCase()\n : value\n ;\n return (value == text);\n },\n\n // is value\n isExactly: function(value, text) {\n return (value == text);\n },\n\n // value is not another value (case insensitive)\n not: function(value, notValue) {\n value = (typeof value == 'string')\n ? value.toLowerCase()\n : value\n ;\n notValue = (typeof notValue == 'string')\n ? notValue.toLowerCase()\n : notValue\n ;\n return (value != notValue);\n },\n\n // value is not another value (case sensitive)\n notExactly: function(value, notValue) {\n return (value != notValue);\n },\n\n // value contains text (insensitive)\n contains: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text, 'i') ) !== -1);\n },\n\n // value contains text (case sensitive)\n containsExactly: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text) ) !== -1);\n },\n\n // value contains text (insensitive)\n doesntContain: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text, 'i') ) === -1);\n },\n\n // value contains text (case sensitive)\n doesntContainExactly: function(value, text) {\n // escape regex characters\n text = text.replace($.fn.form.settings.regExp.escape, \"\\\\$&\");\n return (value.search( new RegExp(text) ) === -1);\n },\n\n // is at least string length\n minLength: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length >= requiredLength)\n : false\n ;\n },\n\n // see rls notes for 2.0.6 (this is a duplicate of minLength)\n length: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length >= requiredLength)\n : false\n ;\n },\n\n // is exactly length\n exactLength: function(value, requiredLength) {\n return (value !== undefined)\n ? (value.length == requiredLength)\n : false\n ;\n },\n\n // is less than length\n maxLength: function(value, maxLength) {\n return (value !== undefined)\n ? (value.length <= maxLength)\n : false\n ;\n },\n\n // matches another field\n match: function(value, identifier) {\n var\n $form = $(this),\n matchingValue\n ;\n if( $('[data-validate=\"'+ identifier +'\"]').length > 0 ) {\n matchingValue = $('[data-validate=\"'+ identifier +'\"]').val();\n }\n else if($('#' + identifier).length > 0) {\n matchingValue = $('#' + identifier).val();\n }\n else if($('[name=\"' + identifier +'\"]').length > 0) {\n matchingValue = $('[name=\"' + identifier + '\"]').val();\n }\n else if( $('[name=\"' + identifier +'[]\"]').length > 0 ) {\n matchingValue = $('[name=\"' + identifier +'[]\"]');\n }\n return (matchingValue !== undefined)\n ? ( value.toString() == matchingValue.toString() )\n : false\n ;\n },\n\n // different than another field\n different: function(value, identifier) {\n // use either id or name of field\n var\n $form = $(this),\n matchingValue\n ;\n if( $('[data-validate=\"'+ identifier +'\"]').length > 0 ) {\n matchingValue = $('[data-validate=\"'+ identifier +'\"]').val();\n }\n else if($('#' + identifier).length > 0) {\n matchingValue = $('#' + identifier).val();\n }\n else if($('[name=\"' + identifier +'\"]').length > 0) {\n matchingValue = $('[name=\"' + identifier + '\"]').val();\n }\n else if( $('[name=\"' + identifier +'[]\"]').length > 0 ) {\n matchingValue = $('[name=\"' + identifier +'[]\"]');\n }\n return (matchingValue !== undefined)\n ? ( value.toString() !== matchingValue.toString() )\n : false\n ;\n },\n\n creditCard: function(cardNumber, cardTypes) {\n var\n cards = {\n visa: {\n pattern : /^4/,\n length : [16]\n },\n amex: {\n pattern : /^3[47]/,\n length : [15]\n },\n mastercard: {\n pattern : /^5[1-5]/,\n length : [16]\n },\n discover: {\n pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/,\n length : [16]\n },\n unionPay: {\n pattern : /^(62|88)/,\n length : [16, 17, 18, 19]\n },\n jcb: {\n pattern : /^35(2[89]|[3-8][0-9])/,\n length : [16]\n },\n maestro: {\n pattern : /^(5018|5020|5038|6304|6759|676[1-3])/,\n length : [12, 13, 14, 15, 16, 17, 18, 19]\n },\n dinersClub: {\n pattern : /^(30[0-5]|^36)/,\n length : [14]\n },\n laser: {\n pattern : /^(6304|670[69]|6771)/,\n length : [16, 17, 18, 19]\n },\n visaElectron: {\n pattern : /^(4026|417500|4508|4844|491(3|7))/,\n length : [16]\n }\n },\n valid = {},\n validCard = false,\n requiredTypes = (typeof cardTypes == 'string')\n ? cardTypes.split(',')\n : false,\n unionPay,\n validation\n ;\n\n if(typeof cardNumber !== 'string' || cardNumber.length === 0) {\n return;\n }\n\n // allow dashes in card\n cardNumber = cardNumber.replace(/[\\-]/g, '');\n\n // verify card types\n if(requiredTypes) {\n $.each(requiredTypes, function(index, type){\n // verify each card type\n validation = cards[type];\n if(validation) {\n valid = {\n length : ($.inArray(cardNumber.length, validation.length) !== -1),\n pattern : (cardNumber.search(validation.pattern) !== -1)\n };\n if(valid.length && valid.pattern) {\n validCard = true;\n }\n }\n });\n\n if(!validCard) {\n return false;\n }\n }\n\n // skip luhn for UnionPay\n unionPay = {\n number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1),\n pattern : (cardNumber.search(cards.unionPay.pattern) !== -1)\n };\n if(unionPay.number && unionPay.pattern) {\n return true;\n }\n\n // verify luhn, adapted from \n var\n length = cardNumber.length,\n multiple = 0,\n producedValue = [\n [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],\n [0, 2, 4, 6, 8, 1, 3, 5, 7, 9]\n ],\n sum = 0\n ;\n while (length--) {\n sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)];\n multiple ^= 1;\n }\n return (sum % 10 === 0 && sum > 0);\n },\n\n minCount: function(value, minCount) {\n if(minCount == 0) {\n return true;\n }\n if(minCount == 1) {\n return (value !== '');\n }\n return (value.split(',').length >= minCount);\n },\n\n exactCount: function(value, exactCount) {\n if(exactCount == 0) {\n return (value === '');\n }\n if(exactCount == 1) {\n return (value !== '' && value.search(',') === -1);\n }\n return (value.split(',').length == exactCount);\n },\n\n maxCount: function(value, maxCount) {\n if(maxCount == 0) {\n return false;\n }\n if(maxCount == 1) {\n return (value.search(',') === -1);\n }\n return (value.split(',').length <= maxCount);\n }\n }\n\n};\n\n})( jQuery, window, document );\n" }, { "path": "semantic/src/definitions/behaviors/visibility.js", "content": "/*!\n * # Semantic UI - Visibility\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.visibility = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue,\n\n moduleCount = $allModules.length,\n loadedCount = 0\n ;\n\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.visibility.settings, parameters)\n : $.extend({}, $.fn.visibility.settings),\n\n className = settings.className,\n namespace = settings.namespace,\n error = settings.error,\n metadata = settings.metadata,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $window = $(window),\n\n $module = $(this),\n $context = $(settings.context),\n\n $placeholder,\n\n selector = $module.selector || '',\n instance = $module.data(moduleNamespace),\n\n requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); },\n\n element = this,\n disabled = false,\n\n contextObserver,\n observer,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.debug('Initializing', settings);\n\n module.setup.cache();\n\n if( module.should.trackChanges() ) {\n\n if(settings.type == 'image') {\n module.setup.image();\n }\n if(settings.type == 'fixed') {\n module.setup.fixed();\n }\n\n if(settings.observeChanges) {\n module.observeChanges();\n }\n module.bind.events();\n }\n\n module.save.position();\n if( !module.is.visible() ) {\n module.error(error.visible, $module);\n }\n\n if(settings.initialCheck) {\n module.checkVisibility();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n module.debug('Storing instance', module);\n $module\n .data(moduleNamespace, module)\n ;\n instance = module;\n },\n\n destroy: function() {\n module.verbose('Destroying previous module');\n if(observer) {\n observer.disconnect();\n }\n if(contextObserver) {\n contextObserver.disconnect();\n }\n $window\n .off('load' + eventNamespace, module.event.load)\n .off('resize' + eventNamespace, module.event.resize)\n ;\n $context\n .off('scroll' + eventNamespace, module.event.scroll)\n .off('scrollchange' + eventNamespace, module.event.scrollchange)\n ;\n if(settings.type == 'fixed') {\n module.resetFixed();\n module.remove.placeholder();\n }\n $module\n .off(eventNamespace)\n .removeData(moduleNamespace)\n ;\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n contextObserver = new MutationObserver(module.event.contextChanged);\n observer = new MutationObserver(module.event.changed);\n contextObserver.observe(document, {\n childList : true,\n subtree : true\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n bind: {\n events: function() {\n module.verbose('Binding visibility events to scroll and resize');\n if(settings.refreshOnLoad) {\n $window\n .on('load' + eventNamespace, module.event.load)\n ;\n }\n $window\n .on('resize' + eventNamespace, module.event.resize)\n ;\n // pub/sub pattern\n $context\n .off('scroll' + eventNamespace)\n .on('scroll' + eventNamespace, module.event.scroll)\n .on('scrollchange' + eventNamespace, module.event.scrollchange)\n ;\n }\n },\n\n event: {\n changed: function(mutations) {\n module.verbose('DOM tree modified, updating visibility calculations');\n module.timer = setTimeout(function() {\n module.verbose('DOM tree modified, updating sticky menu');\n module.refresh();\n }, 100);\n },\n contextChanged: function(mutations) {\n [].forEach.call(mutations, function(mutation) {\n if(mutation.removedNodes) {\n [].forEach.call(mutation.removedNodes, function(node) {\n if(node == element || $(node).find(element).length > 0) {\n module.debug('Element removed from DOM, tearing down events');\n module.destroy();\n }\n });\n }\n });\n },\n resize: function() {\n module.debug('Window resized');\n if(settings.refreshOnResize) {\n requestAnimationFrame(module.refresh);\n }\n },\n load: function() {\n module.debug('Page finished loading');\n requestAnimationFrame(module.refresh);\n },\n // publishes scrollchange event on one scroll\n scroll: function() {\n if(settings.throttle) {\n clearTimeout(module.timer);\n module.timer = setTimeout(function() {\n $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);\n }, settings.throttle);\n }\n else {\n requestAnimationFrame(function() {\n $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);\n });\n }\n },\n // subscribes to scrollchange\n scrollchange: function(event, scrollPosition) {\n module.checkVisibility(scrollPosition);\n },\n },\n\n precache: function(images, callback) {\n if (!(images instanceof Array)) {\n images = [images];\n }\n var\n imagesLength = images.length,\n loadedCounter = 0,\n cache = [],\n cacheImage = document.createElement('img'),\n handleLoad = function() {\n loadedCounter++;\n if (loadedCounter >= images.length) {\n if ($.isFunction(callback)) {\n callback();\n }\n }\n }\n ;\n while (imagesLength--) {\n cacheImage = document.createElement('img');\n cacheImage.onload = handleLoad;\n cacheImage.onerror = handleLoad;\n cacheImage.src = images[imagesLength];\n cache.push(cacheImage);\n }\n },\n\n enableCallbacks: function() {\n module.debug('Allowing callbacks to occur');\n disabled = false;\n },\n\n disableCallbacks: function() {\n module.debug('Disabling all callbacks temporarily');\n disabled = true;\n },\n\n should: {\n trackChanges: function() {\n if(methodInvoked) {\n module.debug('One time query, no need to bind events');\n return false;\n }\n module.debug('Callbacks being attached');\n return true;\n }\n },\n\n setup: {\n cache: function() {\n module.cache = {\n occurred : {},\n screen : {},\n element : {},\n };\n },\n image: function() {\n var\n src = $module.data(metadata.src)\n ;\n if(src) {\n module.verbose('Lazy loading image', src);\n settings.once = true;\n settings.observeChanges = false;\n\n // show when top visible\n settings.onOnScreen = function() {\n module.debug('Image on screen', element);\n module.precache(src, function() {\n module.set.image(src, function() {\n loadedCount++;\n if(loadedCount == moduleCount) {\n settings.onAllLoaded.call(this);\n }\n settings.onLoad.call(this);\n });\n });\n };\n }\n },\n fixed: function() {\n module.debug('Setting up fixed');\n settings.once = false;\n settings.observeChanges = false;\n settings.initialCheck = true;\n settings.refreshOnLoad = true;\n if(!parameters.transition) {\n settings.transition = false;\n }\n module.create.placeholder();\n module.debug('Added placeholder', $placeholder);\n settings.onTopPassed = function() {\n module.debug('Element passed, adding fixed position', $module);\n module.show.placeholder();\n module.set.fixed();\n if(settings.transition) {\n if($.fn.transition !== undefined) {\n $module.transition(settings.transition, settings.duration);\n }\n }\n };\n settings.onTopPassedReverse = function() {\n module.debug('Element returned to position, removing fixed', $module);\n module.hide.placeholder();\n module.remove.fixed();\n };\n }\n },\n\n create: {\n placeholder: function() {\n module.verbose('Creating fixed position placeholder');\n $placeholder = $module\n .clone(false)\n .css('display', 'none')\n .addClass(className.placeholder)\n .insertAfter($module)\n ;\n }\n },\n\n show: {\n placeholder: function() {\n module.verbose('Showing placeholder');\n $placeholder\n .css('display', 'block')\n .css('visibility', 'hidden')\n ;\n }\n },\n hide: {\n placeholder: function() {\n module.verbose('Hiding placeholder');\n $placeholder\n .css('display', 'none')\n .css('visibility', '')\n ;\n }\n },\n\n set: {\n fixed: function() {\n module.verbose('Setting element to fixed position');\n $module\n .addClass(className.fixed)\n .css({\n position : 'fixed',\n top : settings.offset + 'px',\n left : 'auto',\n zIndex : settings.zIndex\n })\n ;\n settings.onFixed.call(element);\n },\n image: function(src, callback) {\n $module\n .attr('src', src)\n ;\n if(settings.transition) {\n if( $.fn.transition !== undefined) {\n if($module.hasClass(className.visible)) {\n module.debug('Transition already occurred on this image, skipping animation');\n return;\n }\n $module.transition(settings.transition, settings.duration, callback);\n }\n else {\n $module.fadeIn(settings.duration, callback);\n }\n }\n else {\n $module.show();\n }\n }\n },\n\n is: {\n onScreen: function() {\n var\n calculations = module.get.elementCalculations()\n ;\n return calculations.onScreen;\n },\n offScreen: function() {\n var\n calculations = module.get.elementCalculations()\n ;\n return calculations.offScreen;\n },\n visible: function() {\n if(module.cache && module.cache.element) {\n return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);\n }\n return false;\n },\n verticallyScrollableContext: function() {\n var\n overflowY = ($context.get(0) !== window)\n ? $context.css('overflow-y')\n : false\n ;\n return (overflowY == 'auto' || overflowY == 'scroll');\n },\n horizontallyScrollableContext: function() {\n var\n overflowX = ($context.get(0) !== window)\n ? $context.css('overflow-x')\n : false\n ;\n return (overflowX == 'auto' || overflowX == 'scroll');\n }\n },\n\n refresh: function() {\n module.debug('Refreshing constants (width/height)');\n if(settings.type == 'fixed') {\n module.resetFixed();\n }\n module.reset();\n module.save.position();\n if(settings.checkOnRefresh) {\n module.checkVisibility();\n }\n settings.onRefresh.call(element);\n },\n\n resetFixed: function () {\n module.remove.fixed();\n module.remove.occurred();\n },\n\n reset: function() {\n module.verbose('Resetting all cached values');\n if( $.isPlainObject(module.cache) ) {\n module.cache.screen = {};\n module.cache.element = {};\n }\n },\n\n checkVisibility: function(scroll) {\n module.verbose('Checking visibility of element', module.cache.element);\n\n if( !disabled && module.is.visible() ) {\n\n // save scroll position\n module.save.scroll(scroll);\n\n // update calculations derived from scroll\n module.save.calculations();\n\n // percentage\n module.passed();\n\n // reverse (must be first)\n module.passingReverse();\n module.topVisibleReverse();\n module.bottomVisibleReverse();\n module.topPassedReverse();\n module.bottomPassedReverse();\n\n // one time\n module.onScreen();\n module.offScreen();\n module.passing();\n module.topVisible();\n module.bottomVisible();\n module.topPassed();\n module.bottomPassed();\n\n // on update callback\n if(settings.onUpdate) {\n settings.onUpdate.call(element, module.get.elementCalculations());\n }\n }\n },\n\n passed: function(amount, newCallback) {\n var\n calculations = module.get.elementCalculations(),\n amountInPixels\n ;\n // assign callback\n if(amount && newCallback) {\n settings.onPassed[amount] = newCallback;\n }\n else if(amount !== undefined) {\n return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);\n }\n else if(calculations.passing) {\n $.each(settings.onPassed, function(amount, callback) {\n if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {\n module.execute(callback, amount);\n }\n else if(!settings.once) {\n module.remove.occurred(callback);\n }\n });\n }\n },\n\n onScreen: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onOnScreen,\n callbackName = 'onScreen'\n ;\n if(newCallback) {\n module.debug('Adding callback for onScreen', newCallback);\n settings.onOnScreen = newCallback;\n }\n if(calculations.onScreen) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.onOnScreen;\n }\n },\n\n offScreen: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onOffScreen,\n callbackName = 'offScreen'\n ;\n if(newCallback) {\n module.debug('Adding callback for offScreen', newCallback);\n settings.onOffScreen = newCallback;\n }\n if(calculations.offScreen) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.onOffScreen;\n }\n },\n\n passing: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onPassing,\n callbackName = 'passing'\n ;\n if(newCallback) {\n module.debug('Adding callback for passing', newCallback);\n settings.onPassing = newCallback;\n }\n if(calculations.passing) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return calculations.passing;\n }\n },\n\n\n topVisible: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopVisible,\n callbackName = 'topVisible'\n ;\n if(newCallback) {\n module.debug('Adding callback for top visible', newCallback);\n settings.onTopVisible = newCallback;\n }\n if(calculations.topVisible) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.topVisible;\n }\n },\n\n bottomVisible: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomVisible,\n callbackName = 'bottomVisible'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom visible', newCallback);\n settings.onBottomVisible = newCallback;\n }\n if(calculations.bottomVisible) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.bottomVisible;\n }\n },\n\n topPassed: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopPassed,\n callbackName = 'topPassed'\n ;\n if(newCallback) {\n module.debug('Adding callback for top passed', newCallback);\n settings.onTopPassed = newCallback;\n }\n if(calculations.topPassed) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.topPassed;\n }\n },\n\n bottomPassed: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomPassed,\n callbackName = 'bottomPassed'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom passed', newCallback);\n settings.onBottomPassed = newCallback;\n }\n if(calculations.bottomPassed) {\n module.execute(callback, callbackName);\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return calculations.bottomPassed;\n }\n },\n\n passingReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onPassingReverse,\n callbackName = 'passingReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for passing reverse', newCallback);\n settings.onPassingReverse = newCallback;\n }\n if(!calculations.passing) {\n if(module.get.occurred('passing')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback !== undefined) {\n return !calculations.passing;\n }\n },\n\n\n topVisibleReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopVisibleReverse,\n callbackName = 'topVisibleReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for top visible reverse', newCallback);\n settings.onTopVisibleReverse = newCallback;\n }\n if(!calculations.topVisible) {\n if(module.get.occurred('topVisible')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.topVisible;\n }\n },\n\n bottomVisibleReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomVisibleReverse,\n callbackName = 'bottomVisibleReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom visible reverse', newCallback);\n settings.onBottomVisibleReverse = newCallback;\n }\n if(!calculations.bottomVisible) {\n if(module.get.occurred('bottomVisible')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.bottomVisible;\n }\n },\n\n topPassedReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onTopPassedReverse,\n callbackName = 'topPassedReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for top passed reverse', newCallback);\n settings.onTopPassedReverse = newCallback;\n }\n if(!calculations.topPassed) {\n if(module.get.occurred('topPassed')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.onTopPassed;\n }\n },\n\n bottomPassedReverse: function(newCallback) {\n var\n calculations = module.get.elementCalculations(),\n callback = newCallback || settings.onBottomPassedReverse,\n callbackName = 'bottomPassedReverse'\n ;\n if(newCallback) {\n module.debug('Adding callback for bottom passed reverse', newCallback);\n settings.onBottomPassedReverse = newCallback;\n }\n if(!calculations.bottomPassed) {\n if(module.get.occurred('bottomPassed')) {\n module.execute(callback, callbackName);\n }\n }\n else if(!settings.once) {\n module.remove.occurred(callbackName);\n }\n if(newCallback === undefined) {\n return !calculations.bottomPassed;\n }\n },\n\n execute: function(callback, callbackName) {\n var\n calculations = module.get.elementCalculations(),\n screen = module.get.screenCalculations()\n ;\n callback = callback || false;\n if(callback) {\n if(settings.continuous) {\n module.debug('Callback being called continuously', callbackName, calculations);\n callback.call(element, calculations, screen);\n }\n else if(!module.get.occurred(callbackName)) {\n module.debug('Conditions met', callbackName, calculations);\n callback.call(element, calculations, screen);\n }\n }\n module.save.occurred(callbackName);\n },\n\n remove: {\n fixed: function() {\n module.debug('Removing fixed position');\n $module\n .removeClass(className.fixed)\n .css({\n position : '',\n top : '',\n left : '',\n zIndex : ''\n })\n ;\n settings.onUnfixed.call(element);\n },\n placeholder: function() {\n module.debug('Removing placeholder content');\n if($placeholder) {\n $placeholder.remove();\n }\n },\n occurred: function(callback) {\n if(callback) {\n var\n occurred = module.cache.occurred\n ;\n if(occurred[callback] !== undefined && occurred[callback] === true) {\n module.debug('Callback can now be called again', callback);\n module.cache.occurred[callback] = false;\n }\n }\n else {\n module.cache.occurred = {};\n }\n }\n },\n\n save: {\n calculations: function() {\n module.verbose('Saving all calculations necessary to determine positioning');\n module.save.direction();\n module.save.screenCalculations();\n module.save.elementCalculations();\n },\n occurred: function(callback) {\n if(callback) {\n if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) {\n module.verbose('Saving callback occurred', callback);\n module.cache.occurred[callback] = true;\n }\n }\n },\n scroll: function(scrollPosition) {\n scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;\n module.cache.scroll = scrollPosition;\n },\n direction: function() {\n var\n scroll = module.get.scroll(),\n lastScroll = module.get.lastScroll(),\n direction\n ;\n if(scroll > lastScroll && lastScroll) {\n direction = 'down';\n }\n else if(scroll < lastScroll && lastScroll) {\n direction = 'up';\n }\n else {\n direction = 'static';\n }\n module.cache.direction = direction;\n return module.cache.direction;\n },\n elementPosition: function() {\n var\n element = module.cache.element,\n screen = module.get.screenSize()\n ;\n module.verbose('Saving element position');\n // (quicker than $.extend)\n element.fits = (element.height < screen.height);\n element.offset = $module.offset();\n element.width = $module.outerWidth();\n element.height = $module.outerHeight();\n // compensate for scroll in context\n if(module.is.verticallyScrollableContext()) {\n element.offset.top += $context.scrollTop() - $context.offset().top;\n }\n if(module.is.horizontallyScrollableContext()) {\n element.offset.left += $context.scrollLeft - $context.offset().left;\n }\n // store\n module.cache.element = element;\n return element;\n },\n elementCalculations: function() {\n var\n screen = module.get.screenCalculations(),\n element = module.get.elementPosition()\n ;\n // offset\n if(settings.includeMargin) {\n element.margin = {};\n element.margin.top = parseInt($module.css('margin-top'), 10);\n element.margin.bottom = parseInt($module.css('margin-bottom'), 10);\n element.top = element.offset.top - element.margin.top;\n element.bottom = element.offset.top + element.height + element.margin.bottom;\n }\n else {\n element.top = element.offset.top;\n element.bottom = element.offset.top + element.height;\n }\n\n // visibility\n element.topPassed = (screen.top >= element.top);\n element.bottomPassed = (screen.top >= element.bottom);\n element.topVisible = (screen.bottom >= element.top) && !element.topPassed;\n element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed;\n element.pixelsPassed = 0;\n element.percentagePassed = 0;\n\n // meta calculations\n element.onScreen = ((element.topVisible || element.passing) && !element.bottomPassed);\n element.passing = (element.topPassed && !element.bottomPassed);\n element.offScreen = (!element.onScreen);\n\n // passing calculations\n if(element.passing) {\n element.pixelsPassed = (screen.top - element.top);\n element.percentagePassed = (screen.top - element.top) / element.height;\n }\n module.cache.element = element;\n module.verbose('Updated element calculations', element);\n return element;\n },\n screenCalculations: function() {\n var\n scroll = module.get.scroll()\n ;\n module.save.direction();\n module.cache.screen.top = scroll;\n module.cache.screen.bottom = scroll + module.cache.screen.height;\n return module.cache.screen;\n },\n screenSize: function() {\n module.verbose('Saving window position');\n module.cache.screen = {\n height: $context.height()\n };\n },\n position: function() {\n module.save.screenSize();\n module.save.elementPosition();\n }\n },\n\n get: {\n pixelsPassed: function(amount) {\n var\n element = module.get.elementCalculations()\n ;\n if(amount.search('%') > -1) {\n return ( element.height * (parseInt(amount, 10) / 100) );\n }\n return parseInt(amount, 10);\n },\n occurred: function(callback) {\n return (module.cache.occurred !== undefined)\n ? module.cache.occurred[callback] || false\n : false\n ;\n },\n direction: function() {\n if(module.cache.direction === undefined) {\n module.save.direction();\n }\n return module.cache.direction;\n },\n elementPosition: function() {\n if(module.cache.element === undefined) {\n module.save.elementPosition();\n }\n return module.cache.element;\n },\n elementCalculations: function() {\n if(module.cache.element === undefined) {\n module.save.elementCalculations();\n }\n return module.cache.element;\n },\n screenCalculations: function() {\n if(module.cache.screen === undefined) {\n module.save.screenCalculations();\n }\n return module.cache.screen;\n },\n screenSize: function() {\n if(module.cache.screen === undefined) {\n module.save.screenSize();\n }\n return module.cache.screen;\n },\n scroll: function() {\n if(module.cache.scroll === undefined) {\n module.save.scroll();\n }\n return module.cache.scroll;\n },\n lastScroll: function() {\n if(module.cache.screen === undefined) {\n module.debug('First scroll event, no last scroll could be found');\n return false;\n }\n return module.cache.screen.top;\n }\n },\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n instance.save.scroll();\n instance.save.calculations();\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.visibility.settings = {\n\n name : 'Visibility',\n namespace : 'visibility',\n\n debug : false,\n verbose : false,\n performance : true,\n\n // whether to use mutation observers to follow changes\n observeChanges : true,\n\n // check position immediately on init\n initialCheck : true,\n\n // whether to refresh calculations after all page images load\n refreshOnLoad : true,\n\n // whether to refresh calculations after page resize event\n refreshOnResize : true,\n\n // should call callbacks on refresh event (resize, etc)\n checkOnRefresh : true,\n\n // callback should only occur one time\n once : true,\n\n // callback should fire continuously whe evaluates to true\n continuous : false,\n\n // offset to use with scroll top\n offset : 0,\n\n // whether to include margin in elements position\n includeMargin : false,\n\n // scroll context for visibility checks\n context : window,\n\n // visibility check delay in ms (defaults to animationFrame)\n throttle : false,\n\n // special visibility type (image, fixed)\n type : false,\n\n // z-index to use with visibility 'fixed'\n zIndex : '10',\n\n // image only animation settings\n transition : 'fade in',\n duration : 1000,\n\n // array of callbacks for percentage\n onPassed : {},\n\n // standard callbacks\n onOnScreen : false,\n onOffScreen : false,\n onPassing : false,\n onTopVisible : false,\n onBottomVisible : false,\n onTopPassed : false,\n onBottomPassed : false,\n\n // reverse callbacks\n onPassingReverse : false,\n onTopVisibleReverse : false,\n onBottomVisibleReverse : false,\n onTopPassedReverse : false,\n onBottomPassedReverse : false,\n\n // special callbacks for image\n onLoad : function() {},\n onAllLoaded : function() {},\n\n // special callbacks for fixed position\n onFixed : function() {},\n onUnfixed : function() {},\n\n // utility callbacks\n onUpdate : false, // disabled by default for performance\n onRefresh : function(){},\n\n metadata : {\n src: 'src'\n },\n\n className: {\n fixed : 'fixed',\n placeholder : 'placeholder',\n visible : 'visible'\n },\n\n error : {\n method : 'The method you called is not defined.',\n visible : 'Element is hidden, you must call refresh after element becomes visible'\n }\n\n};\n\n})( jQuery, window, document );\n" }, { "path": "semantic/src/definitions/collections/breadcrumb.less", "content": "/*!\n * # Semantic UI - Breadcrumb\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'breadcrumb';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Breadcrumb\n*******************************/\n\n.ui.breadcrumb {\n line-height: 1;\n display: @display;\n margin: @verticalMargin 0em;\n vertical-align: @verticalAlign;\n}\n.ui.breadcrumb:first-child {\n margin-top: 0em;\n}\n.ui.breadcrumb:last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Content\n*******************************/\n\n/* Divider */\n.ui.breadcrumb .divider {\n display: inline-block;\n opacity: @dividerOpacity;\n margin: 0em @dividerSpacing 0em;\n\n font-size: @dividerSize;\n color: @dividerColor;\n vertical-align: @dividerVerticalAlign;\n}\n\n/* Link */\n.ui.breadcrumb a {\n color: @linkColor;\n}\n.ui.breadcrumb a:hover {\n color: @linkHoverColor;\n}\n\n\n/* Icon Divider */\n.ui.breadcrumb .icon.divider {\n font-size: @iconDividerSize;\n vertical-align: @iconDividerVerticalAlign;\n}\n\n/* Section */\n.ui.breadcrumb a.section {\n cursor: pointer;\n}\n.ui.breadcrumb .section {\n display: inline-block;\n margin: @sectionMargin;\n padding: @sectionPadding;\n}\n\n/* Loose Coupling */\n.ui.breadcrumb.segment {\n display: inline-block;\n padding: @segmentPadding;\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.breadcrumb .active.section {\n font-weight: @activeFontWeight;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n.ui.mini.breadcrumb {\n font-size: @mini;\n}\n.ui.tiny.breadcrumb {\n font-size: @tiny;\n}\n.ui.small.breadcrumb {\n font-size: @small;\n}\n.ui.breadcrumb {\n font-size: @medium;\n}\n.ui.large.breadcrumb {\n font-size: @large;\n}\n.ui.big.breadcrumb {\n font-size: @big;\n}\n.ui.huge.breadcrumb {\n font-size: @huge;\n}\n.ui.massive.breadcrumb {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/collections/form.less", "content": "/*!\n * # Semantic UI - Form\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'form';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Elements\n*******************************/\n\n/*--------------------\n Form\n---------------------*/\n\n.ui.form {\n position: relative;\n max-width: 100%;\n}\n\n/*--------------------\n Content\n---------------------*/\n\n.ui.form > p {\n margin: @paragraphMargin;\n}\n\n/*--------------------\n Field\n---------------------*/\n\n.ui.form .field {\n clear: both;\n margin: @fieldMargin;\n}\n\n.ui.form .field:last-child,\n.ui.form .fields:last-child .field {\n margin-bottom: 0em;\n}\n\n.ui.form .fields .field {\n clear: both;\n margin: 0em;\n}\n\n\n/*--------------------\n Labels\n---------------------*/\n\n.ui.form .field > label {\n display: block;\n margin: @labelMargin;\n color: @labelColor;\n font-size: @labelFontSize;\n font-weight: @labelFontWeight;\n text-transform: @labelTextTransform;\n}\n\n/*--------------------\n Standard Inputs\n---------------------*/\n\n\n.ui.form textarea,\n.ui.form input:not([type]),\n.ui.form input[type=\"date\"],\n.ui.form input[type=\"datetime-local\"],\n.ui.form input[type=\"email\"],\n.ui.form input[type=\"number\"],\n.ui.form input[type=\"password\"],\n.ui.form input[type=\"search\"],\n.ui.form input[type=\"tel\"],\n.ui.form input[type=\"time\"],\n.ui.form input[type=\"text\"],\n.ui.form input[type=\"file\"],\n.ui.form input[type=\"url\"] {\n width: @inputWidth;\n vertical-align: top;\n}\n\n/* Set max height on unusual input */\n.ui.form ::-webkit-datetime-edit,\n.ui.form ::-webkit-inner-spin-button {\n height: @inputLineHeight;\n}\n\n.ui.form input:not([type]),\n.ui.form input[type=\"date\"],\n.ui.form input[type=\"datetime-local\"],\n.ui.form input[type=\"email\"],\n.ui.form input[type=\"number\"],\n.ui.form input[type=\"password\"],\n.ui.form input[type=\"search\"],\n.ui.form input[type=\"tel\"],\n.ui.form input[type=\"time\"],\n.ui.form input[type=\"text\"],\n.ui.form input[type=\"file\"],\n.ui.form input[type=\"url\"] {\n font-family: @inputFont;\n margin: 0em;\n outline: none;\n -webkit-appearance: none;\n tap-highlight-color: rgba(255, 255, 255, 0);\n\n line-height: @inputLineHeight;\n padding: @inputPadding;\n font-size: @inputFontSize;\n\n background: @inputBackground;\n border: @inputBorder;\n color: @inputColor;\n border-radius: @inputBorderRadius;\n box-shadow: @inputBoxShadow;\n transition: @inputTransition;\n}\n\n/* Text Area */\n.ui.form textarea {\n margin: 0em;\n -webkit-appearance: none;\n tap-highlight-color: rgba(255, 255, 255, 0);\n\n padding: @textAreaPadding;\n font-size: @textAreaFontSize;\n background: @textAreaBackground;\n border: @textAreaBorder;\n outline: none;\n color: @inputColor;\n border-radius: @inputBorderRadius;\n box-shadow: @inputBoxShadow;\n transition: @textAreaTransition;\n font-size: @textAreaFontSize;\n line-height: @textAreaLineHeight;\n resize: @textAreaResize;\n}\n.ui.form textarea:not([rows]) {\n height: @textAreaHeight;\n min-height: @textAreaMinHeight;\n max-height: @textAreaMaxHeight;\n}\n\n.ui.form textarea,\n.ui.form input[type=\"checkbox\"] {\n vertical-align: @checkboxVerticalAlign;\n}\n\n/*--------------------------\n Input w/ attached Button\n---------------------------*/\n\n.ui.form input.attached {\n width: auto;\n}\n\n\n/*--------------------\n Basic Select\n---------------------*/\n\n.ui.form select {\n display: block;\n height: auto;\n width: 100%;\n background: @selectBackground;\n border: @selectBorder;\n border-radius: @selectBorderRadius;\n box-shadow: @selectBoxShadow;\n padding: @selectPadding;\n color: @selectColor;\n transition: @selectTransition;\n}\n\n/*--------------------\n Dropdown\n---------------------*/\n\n/* Block */\n.ui.form .field > .selection.dropdown {\n width: 100%;\n}\n.ui.form .field > .selection.dropdown > .dropdown.icon {\n float: right;\n}\n\n/* Inline */\n.ui.form .inline.fields .field > .selection.dropdown,\n.ui.form .inline.field > .selection.dropdown {\n width: auto;\n}\n.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,\n.ui.form .inline.field > .selection.dropdown > .dropdown.icon {\n float: none;\n}\n\n/*--------------------\n UI Input\n---------------------*/\n\n/* Block */\n.ui.form .field .ui.input,\n.ui.form .fields .field .ui.input,\n.ui.form .wide.field .ui.input {\n width: 100%;\n}\n\n/* Inline */\n.ui.form .inline.fields .field:not(.wide) .ui.input,\n.ui.form .inline.field:not(.wide) .ui.input {\n width: auto;\n vertical-align: middle;\n}\n\n/* Auto Input */\n.ui.form .fields .field .ui.input input,\n.ui.form .field .ui.input input {\n width: auto;\n}\n\n/* Full Width Input */\n.ui.form .ten.fields .ui.input input,\n.ui.form .nine.fields .ui.input input,\n.ui.form .eight.fields .ui.input input,\n.ui.form .seven.fields .ui.input input,\n.ui.form .six.fields .ui.input input,\n.ui.form .five.fields .ui.input input,\n.ui.form .four.fields .ui.input input,\n.ui.form .three.fields .ui.input input,\n.ui.form .two.fields .ui.input input,\n.ui.form .wide.field .ui.input input {\n flex: 1 0 auto;\n width: 0px;\n}\n\n\n/*--------------------\n Types of Messages\n---------------------*/\n\n.ui.form .success.message,\n.ui.form .warning.message,\n.ui.form .error.message {\n display: none;\n}\n\n/* Assumptions */\n.ui.form .message:first-child {\n margin-top: 0px;\n}\n\n/*--------------------\n Validation Prompt\n---------------------*/\n\n.ui.form .field .prompt.label {\n white-space: normal;\n background: @promptBackground !important;\n border: @promptBorder !important;\n color: @promptTextColor !important;\n}\n.ui.form .inline.fields .field .prompt,\n.ui.form .inline.field .prompt {\n vertical-align: top;\n margin: @inlinePromptMargin;\n}\n.ui.form .inline.fields .field .prompt:before,\n.ui.form .inline.field .prompt:before {\n border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;\n bottom: auto;\n right: auto;\n top: 50%;\n left: 0em;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------------\n Autofilled\n---------------------*/\n\n.ui.form .field.field input:-webkit-autofill {\n box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;\n border-color: @inputAutoFillBorder !important;\n}\n\n/* Focus */\n.ui.form .field.field input:-webkit-autofill:focus {\n box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;\n border-color: @inputAutoFillFocusBorder !important;\n}\n\n/* Error */\n.ui.form .error.error input:-webkit-autofill {\n box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;\n border-color: @inputAutoFillErrorBorder !important;\n}\n\n\n\n/*--------------------\n Placeholder\n---------------------*/\n\n/* browsers require these rules separate */\n.ui.form ::-webkit-input-placeholder {\n color: @inputPlaceholderColor;\n}\n.ui.form :-ms-input-placeholder {\n color: @inputPlaceholderColor;\n}\n.ui.form ::-moz-placeholder {\n color: @inputPlaceholderColor;\n}\n\n.ui.form :focus::-webkit-input-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n.ui.form :focus:-ms-input-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n.ui.form :focus::-moz-placeholder {\n color: @inputPlaceholderFocusColor;\n}\n\n/* Error Placeholder */\n.ui.form .error ::-webkit-input-placeholder {\n color: @inputErrorPlaceholderColor;\n}\n.ui.form .error :-ms-input-placeholder {\n color: @inputErrorPlaceholderColor !important;\n}\n.ui.form .error ::-moz-placeholder {\n color: @inputErrorPlaceholderColor;\n}\n\n.ui.form .error :focus::-webkit-input-placeholder {\n color: @inputErrorPlaceholderFocusColor;\n}\n.ui.form .error :focus:-ms-input-placeholder {\n color: @inputErrorPlaceholderFocusColor !important;\n}\n.ui.form .error :focus::-moz-placeholder {\n color: @inputErrorPlaceholderFocusColor;\n}\n\n\n/*--------------------\n Focus\n---------------------*/\n\n.ui.form input:not([type]):focus,\n.ui.form input[type=\"date\"]:focus,\n.ui.form input[type=\"datetime-local\"]:focus,\n.ui.form input[type=\"email\"]:focus,\n.ui.form input[type=\"number\"]:focus,\n.ui.form input[type=\"password\"]:focus,\n.ui.form input[type=\"search\"]:focus,\n.ui.form input[type=\"tel\"]:focus,\n.ui.form input[type=\"time\"]:focus,\n.ui.form input[type=\"text\"]:focus,\n.ui.form input[type=\"file\"]:focus,\n.ui.form input[type=\"url\"]:focus {\n color: @inputFocusColor;\n border-color: @inputFocusBorderColor;\n border-radius: @inputFocusBorderRadius;\n background: @inputFocusBackground;\n box-shadow: @inputFocusBoxShadow;\n}\n.ui.form textarea:focus {\n color: @textAreaFocusColor;\n border-color: @textAreaFocusBorderColor;\n border-radius: @textAreaFocusBorderRadius;\n background: @textAreaFocusBackground;\n box-shadow: @textAreaFocusBoxShadow;\n -webkit-appearance: none;\n}\n\n\n/*--------------------\n Success\n---------------------*/\n\n/* On Form */\n.ui.form.success .success.message:not(:empty) {\n display: block;\n}\n.ui.form.success .compact.success.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.success .icon.success.message:not(:empty) {\n display: flex;\n}\n\n/*--------------------\n Warning\n---------------------*/\n\n/* On Form */\n.ui.form.warning .warning.message:not(:empty) {\n display: block;\n}\n.ui.form.warning .compact.warning.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.warning .icon.warning.message:not(:empty) {\n display: flex;\n}\n\n/*--------------------\n Error\n---------------------*/\n\n/* On Form */\n.ui.form.error .error.message:not(:empty) {\n display: block;\n}\n.ui.form.error .compact.error.message:not(:empty) {\n display: inline-block;\n}\n.ui.form.error .icon.error.message:not(:empty) {\n display: flex;\n}\n\n/* On Field(s) */\n.ui.form .fields.error .field label,\n.ui.form .field.error label,\n.ui.form .fields.error .field .input,\n.ui.form .field.error .input {\n color: @formErrorColor;\n}\n\n.ui.form .fields.error .field .corner.label,\n.ui.form .field.error .corner.label {\n border-color: @formErrorColor;\n color: @white;\n}\n\n.ui.form .fields.error .field textarea,\n.ui.form .fields.error .field select,\n.ui.form .fields.error .field input:not([type]),\n.ui.form .fields.error .field input[type=\"date\"],\n.ui.form .fields.error .field input[type=\"datetime-local\"],\n.ui.form .fields.error .field input[type=\"email\"],\n.ui.form .fields.error .field input[type=\"number\"],\n.ui.form .fields.error .field input[type=\"password\"],\n.ui.form .fields.error .field input[type=\"search\"],\n.ui.form .fields.error .field input[type=\"tel\"],\n.ui.form .fields.error .field input[type=\"time\"],\n.ui.form .fields.error .field input[type=\"text\"],\n.ui.form .fields.error .field input[type=\"file\"],\n.ui.form .fields.error .field input[type=\"url\"],\n.ui.form .field.error textarea,\n.ui.form .field.error select,\n.ui.form .field.error input:not([type]),\n.ui.form .field.error input[type=\"date\"],\n.ui.form .field.error input[type=\"datetime-local\"],\n.ui.form .field.error input[type=\"email\"],\n.ui.form .field.error input[type=\"number\"],\n.ui.form .field.error input[type=\"password\"],\n.ui.form .field.error input[type=\"search\"],\n.ui.form .field.error input[type=\"tel\"],\n.ui.form .field.error input[type=\"time\"],\n.ui.form .field.error input[type=\"text\"],\n.ui.form .field.error input[type=\"file\"],\n.ui.form .field.error input[type=\"url\"] {\n background: @formErrorBackground;\n border-color: @formErrorBorder;\n color: @formErrorColor;\n border-radius: @inputErrorBorderRadius;\n box-shadow: @inputErrorBoxShadow;\n}\n.ui.form .field.error textarea:focus,\n.ui.form .field.error select:focus,\n.ui.form .field.error input:not([type]):focus,\n.ui.form .field.error input[type=\"date\"]:focus,\n.ui.form .field.error input[type=\"datetime-local\"]:focus,\n.ui.form .field.error input[type=\"email\"]:focus,\n.ui.form .field.error input[type=\"number\"]:focus,\n.ui.form .field.error input[type=\"password\"]:focus,\n.ui.form .field.error input[type=\"search\"]:focus,\n.ui.form .field.error input[type=\"tel\"]:focus,\n.ui.form .field.error input[type=\"time\"]:focus,\n.ui.form .field.error input[type=\"text\"]:focus,\n.ui.form .field.error input[type=\"file\"]:focus,\n.ui.form .field.error input[type=\"url\"]:focus {\n background: @inputErrorFocusBackground;\n border-color: @inputErrorFocusBorder;\n color: @inputErrorFocusColor;\n\n -webkit-appearance: none;\n box-shadow: @inputErrorFocusBoxShadow;\n}\n\n/* Preserve Native Select Stylings */\n.ui.form .field.error select {\n -webkit-appearance: menulist-button;\n}\n\n/*------------------\n Dropdown Error\n--------------------*/\n\n.ui.form .fields.error .field .ui.dropdown,\n.ui.form .fields.error .field .ui.dropdown .item,\n.ui.form .field.error .ui.dropdown,\n.ui.form .field.error .ui.dropdown .text,\n.ui.form .field.error .ui.dropdown .item {\n background: @formErrorBackground;\n color: @formErrorColor;\n}\n.ui.form .fields.error .field .ui.dropdown,\n.ui.form .field.error .ui.dropdown {\n border-color: @formErrorBorder !important;\n}\n.ui.form .fields.error .field .ui.dropdown:hover,\n.ui.form .field.error .ui.dropdown:hover {\n border-color: @formErrorBorder !important;\n}\n.ui.form .fields.error .field .ui.dropdown:hover .menu,\n.ui.form .field.error .ui.dropdown:hover .menu {\n border-color: @formErrorBorder;\n}\n.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,\n.ui.form .field.error .ui.multiple.selection.dropdown > .label {\n background-color: @dropdownErrorLabelBackground;\n color: @dropdownErrorLabelColor;\n}\n\n/* Hover */\n.ui.form .fields.error .field .ui.dropdown .menu .item:hover,\n.ui.form .field.error .ui.dropdown .menu .item:hover {\n background-color: @dropdownErrorHoverBackground;\n}\n\n/* Selected */\n.ui.form .fields.error .field .ui.dropdown .menu .selected.item,\n.ui.form .field.error .ui.dropdown .menu .selected.item {\n background-color: @dropdownErrorSelectedBackground;\n}\n\n\n/* Active */\n.ui.form .fields.error .field .ui.dropdown .menu .active.item,\n.ui.form .field.error .ui.dropdown .menu .active.item {\n background-color: @dropdownErrorActiveBackground !important;\n}\n\n/*--------------------\n Checkbox Error\n---------------------*/\n\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {\n color: @formErrorColor;\n}\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,\n.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,\n.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {\n background: @formErrorBackground;\n border-color: @formErrorBorder;\n}\n.ui.form .fields.error .field .checkbox label:after,\n.ui.form .field.error .checkbox label:after,\n.ui.form .fields.error .field .checkbox .box:after,\n.ui.form .field.error .checkbox .box:after {\n color: @formErrorColor;\n}\n\n/*--------------------\n Disabled\n---------------------*/\n\n.ui.form .disabled.fields .field,\n.ui.form .disabled.field,\n.ui.form .field :disabled {\n pointer-events: none;\n opacity: @disabledOpacity;\n}\n.ui.form .field.disabled > label,\n.ui.form .fields.disabled > label {\n opacity: @disabledLabelOpacity;\n}\n.ui.form .field.disabled :disabled {\n opacity: 1;\n}\n\n\n/*--------------\n Loading\n---------------*/\n\n.ui.loading.form {\n position: relative;\n cursor: default;\n pointer-events: none;\n}\n.ui.loading.form:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0%;\n background: @loaderDimmerColor;\n width: 100%;\n height: 100%;\n z-index: @loaderDimmerZIndex;\n}\n.ui.loading.form:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: form-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n visibility: visible;\n z-index: @loaderLineZIndex;\n}\n\n@keyframes form-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/*******************************\n Element Types\n*******************************/\n\n/*--------------------\n Required Field\n---------------------*/\n\n.ui.form .required.fields:not(.grouped) > .field > label:after,\n.ui.form .required.fields.grouped > label:after,\n.ui.form .required.field > label:after,\n.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,\n.ui.form .required.field > .checkbox:after {\n margin: @requiredMargin;\n content: @requiredContent;\n color: @requiredColor;\n}\n\n.ui.form .required.fields:not(.grouped) > .field > label:after,\n.ui.form .required.fields.grouped > label:after,\n.ui.form .required.field > label:after {\n display: inline-block;\n vertical-align: top;\n}\n\n.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,\n.ui.form .required.field > .checkbox:after {\n position: absolute;\n top: 0%;\n left: 100%;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------------\n Inverted Colors\n---------------------*/\n\n.ui.inverted.form label,\n.ui.form .inverted.segment label,\n.ui.form .inverted.segment .ui.checkbox label,\n.ui.form .inverted.segment .ui.checkbox .box,\n.ui.inverted.form .ui.checkbox label,\n.ui.inverted.form .ui.checkbox .box,\n.ui.inverted.form .inline.fields > label,\n.ui.inverted.form .inline.fields .field > label,\n.ui.inverted.form .inline.fields .field > p,\n.ui.inverted.form .inline.field > label,\n.ui.inverted.form .inline.field > p {\n color: @invertedLabelColor;\n}\n\n/* Inverted Field */\n.ui.inverted.form input:not([type]),\n.ui.inverted.form input[type=\"date\"],\n.ui.inverted.form input[type=\"datetime-local\"],\n.ui.inverted.form input[type=\"email\"],\n.ui.inverted.form input[type=\"number\"],\n.ui.inverted.form input[type=\"password\"],\n.ui.inverted.form input[type=\"search\"],\n.ui.inverted.form input[type=\"tel\"],\n.ui.inverted.form input[type=\"time\"],\n.ui.inverted.form input[type=\"text\"],\n.ui.inverted.form input[type=\"file\"],\n.ui.inverted.form input[type=\"url\"] {\n background: @invertedInputBackground;\n border-color: @invertedInputBorderColor;\n color: @invertedInputColor;\n box-shadow: @invertedInputBoxShadow;\n}\n\n\n/*--------------------\n Field Groups\n---------------------*/\n\n/* Grouped Vertically */\n.ui.form .grouped.fields {\n display: block;\n margin: @groupedMargin;\n}\n.ui.form .grouped.fields:last-child {\n margin-bottom: 0em;\n}\n\n.ui.form .grouped.fields > label {\n margin: @groupedLabelMargin;\n color: @groupedLabelColor;\n font-size: @groupedLabelFontSize;\n font-weight: @groupedLabelFontWeight;\n text-transform: @groupedLabelTextTransform;\n}\n\n.ui.form .grouped.fields .field,\n.ui.form .grouped.inline.fields .field {\n display: block;\n margin: @groupedFieldMargin;\n padding: 0em;\n}\n\n/*--------------------\n Fields\n---------------------*/\n\n/* Split fields */\n.ui.form .fields {\n display: flex;\n flex-direction: row;\n margin: @fieldsMargin;\n}\n.ui.form .fields > .field {\n flex: 0 1 auto;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n.ui.form .fields > .field:first-child {\n border-left: none;\n box-shadow: none;\n}\n\n/* Other Combinations */\n.ui.form .two.fields > .fields,\n.ui.form .two.fields > .field {\n width: @twoColumn;\n}\n.ui.form .three.fields > .fields,\n.ui.form .three.fields > .field {\n width: @threeColumn;\n}\n.ui.form .four.fields > .fields,\n.ui.form .four.fields > .field {\n width: @fourColumn;\n}\n.ui.form .five.fields > .fields,\n.ui.form .five.fields > .field {\n width: @fiveColumn;\n}\n.ui.form .six.fields > .fields,\n.ui.form .six.fields > .field {\n width: @sixColumn;\n}\n.ui.form .seven.fields > .fields,\n.ui.form .seven.fields > .field {\n width: @sevenColumn;\n}\n.ui.form .eight.fields > .fields,\n.ui.form .eight.fields > .field {\n width: @eightColumn;\n}\n.ui.form .nine.fields > .fields,\n.ui.form .nine.fields > .field {\n width: @nineColumn;\n}\n.ui.form .ten.fields > .fields,\n.ui.form .ten.fields > .field {\n width: @tenColumn;\n}\n\n/* Swap to full width on mobile */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.form .fields {\n flex-wrap: wrap;\n }\n\n .ui[class*=\"equal width\"].form:not(.unstackable) .fields > .field,\n .ui.form:not(.unstackable) [class*=\"equal width\"].fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {\n width: @oneColumn !important;\n margin: 0em 0em @rowDistance;\n }\n}\n\n\n/* Sizing Combinations */\n.ui.form .fields .wide.field {\n width: @oneWide;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n\n.ui.form .one.wide.field {\n width: @oneWide !important;\n}\n.ui.form .two.wide.field {\n width: @twoWide !important;\n}\n.ui.form .three.wide.field {\n width: @threeWide !important;\n}\n.ui.form .four.wide.field {\n width: @fourWide !important;\n}\n.ui.form .five.wide.field {\n width: @fiveWide !important;\n}\n.ui.form .six.wide.field {\n width: @sixWide !important;\n}\n.ui.form .seven.wide.field {\n width: @sevenWide !important;\n}\n.ui.form .eight.wide.field {\n width: @eightWide !important;\n}\n.ui.form .nine.wide.field {\n width: @nineWide !important;\n}\n.ui.form .ten.wide.field {\n width: @tenWide !important;\n}\n.ui.form .eleven.wide.field {\n width: @elevenWide !important;\n}\n.ui.form .twelve.wide.field {\n width: @twelveWide !important;\n}\n.ui.form .thirteen.wide.field {\n width: @thirteenWide !important;\n}\n.ui.form .fourteen.wide.field {\n width: @fourteenWide !important;\n}\n.ui.form .fifteen.wide.field {\n width: @fifteenWide !important;\n}\n.ui.form .sixteen.wide.field {\n width: @sixteenWide !important;\n}\n\n/* Swap to full width on mobile */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,\n .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,\n .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {\n width: @oneColumn !important;\n }\n .ui.form .fields {\n margin-bottom: 0em;\n }\n}\n\n/*--------------------\n Equal Width\n---------------------*/\n\n.ui[class*=\"equal width\"].form .fields > .field,\n.ui.form [class*=\"equal width\"].fields > .field {\n width: 100%;\n flex: 1 1 auto;\n}\n\n/*--------------------\n Inline Fields\n---------------------*/\n\n.ui.form .inline.fields {\n margin: @fieldMargin;\n align-items: center;\n}\n.ui.form .inline.fields .field {\n margin: 0em;\n padding: @inlineFieldsMargin;\n}\n\n/* Inline Label */\n.ui.form .inline.fields > label,\n.ui.form .inline.fields .field > label,\n.ui.form .inline.fields .field > p,\n.ui.form .inline.field > label,\n.ui.form .inline.field > p {\n display: inline-block;\n width: auto;\n margin-top: 0em;\n margin-bottom: 0em;\n vertical-align: baseline;\n font-size: @inlineLabelFontSize;\n font-weight: @inlineLabelFontWeight;\n color: @inlineLabelColor;\n text-transform: @inlineLabelTextTransform;\n}\n\n/* Grouped Inline Label */\n.ui.form .inline.fields > label {\n margin: @groupedInlineLabelMargin;\n}\n\n/* Inline Input */\n.ui.form .inline.fields .field > input,\n.ui.form .inline.fields .field > select,\n.ui.form .inline.field > input,\n.ui.form .inline.field > select {\n display: inline-block;\n width: auto;\n\n margin-top: 0em;\n margin-bottom: 0em;\n\n vertical-align: middle;\n font-size: @inlineInputSize;\n}\n\n/* Label */\n.ui.form .inline.fields .field > :first-child,\n.ui.form .inline.field > :first-child {\n margin: 0em @inlineLabelDistance 0em 0em;\n}\n.ui.form .inline.fields .field > :only-child,\n.ui.form .inline.field > :only-child {\n margin: 0em;\n}\n\n/* Wide */\n.ui.form .inline.fields .wide.field {\n display: flex;\n align-items: center;\n}\n.ui.form .inline.fields .wide.field > input,\n.ui.form .inline.fields .wide.field > select {\n width: 100%;\n}\n\n\n/*--------------------\n Sizes\n---------------------*/\n\n.ui.mini.form {\n font-size: @mini;\n}\n.ui.tiny.form {\n font-size: @tiny;\n}\n.ui.small.form {\n font-size: @small;\n}\n.ui.form {\n font-size: @medium;\n}\n.ui.large.form {\n font-size: @large;\n}\n.ui.big.form {\n font-size: @big;\n}\n.ui.huge.form {\n font-size: @huge;\n}\n.ui.massive.form {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/collections/grid.less", "content": "/*!\n * # Semantic UI - Grid\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'grid';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Standard\n*******************************/\n\n.ui.grid {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: stretch;\n padding: 0em;\n}\n\n/*----------------------\n Remove Gutters\n-----------------------*/\n\n.ui.grid {\n margin-top: -(@rowSpacing / 2);\n margin-bottom: -(@rowSpacing / 2);\n margin-left: -(@gutterWidth / 2);\n margin-right: -(@gutterWidth / 2);\n}\n.ui.relaxed.grid {\n margin-left: -(@relaxedGutterWidth / 2);\n margin-right: -(@relaxedGutterWidth / 2);\n}\n.ui[class*=\"very relaxed\"].grid {\n margin-left: -(@veryRelaxedGutterWidth / 2);\n margin-right: -(@veryRelaxedGutterWidth / 2);\n}\n\n\n/* Preserve Rows Spacing on Consecutive Grids */\n.ui.grid + .grid {\n margin-top: @consecutiveGridDistance;\n}\n\n/*-------------------\n Columns\n--------------------*/\n\n/* Standard 16 column */\n.ui.grid > .column:not(.row),\n.ui.grid > .row > .column {\n position: relative;\n display: inline-block;\n\n width: @oneWide;\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n vertical-align: top;\n}\n\n.ui.grid > * {\n padding-left: (@gutterWidth / 2);\n padding-right: (@gutterWidth / 2);\n}\n\n/*-------------------\n Rows\n--------------------*/\n\n.ui.grid > .row {\n position: relative;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: inherit;\n align-items: stretch;\n width: 100% !important;\n padding: 0rem;\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n\n/*-------------------\n Columns\n--------------------*/\n\n/* Vertical padding when no rows */\n.ui.grid > .column:not(.row) {\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n.ui.grid > .row > .column {\n margin-top: 0em;\n margin-bottom: 0em;\n}\n\n/*-------------------\n Content\n--------------------*/\n\n.ui.grid > .row > img,\n.ui.grid > .row > .column > img {\n max-width: @columnMaxImageWidth;\n}\n\n/*-------------------\n Loose Coupling\n--------------------*/\n\n/* Collapse Margin on Consecutive Grid */\n.ui.grid > .ui.grid:first-child {\n margin-top: 0em;\n}\n.ui.grid > .ui.grid:last-child {\n margin-bottom: 0em;\n}\n\n/* Segment inside Aligned Grid */\n.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),\n.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {\n width: 100%;\n}\n\n/* Align Dividers with Gutter */\n.ui.grid .row + .ui.divider {\n flex-grow: 1;\n margin: (@rowSpacing / 2) (@gutterWidth / 2);\n}\n.ui.grid .column + .ui.vertical.divider {\n height: ~\"calc(50% - \"(@rowSpacing/2)~\")\";\n}\n\n/* Remove Border on Last Horizontal Segment */\n.ui.grid > .row > .column:last-child > .horizontal.segment,\n.ui.grid > .column:last-child > .horizontal.segment {\n box-shadow: none;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-----------------------\n Page Grid\n-------------------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.page.grid {\n width: @mobileWidth;\n padding-left: @mobileGutter;\n padding-right: @mobileGutter;\n margin-left: 0em;\n margin-right: 0em;\n }\n}\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.page.grid {\n width: @tabletWidth;\n margin-left: @tabletMargin;\n margin-right: @tabletMargin;\n padding-left: @tabletGutter;\n padding-right: @tabletGutter;\n }\n}\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui.page.grid {\n width: @computerWidth;\n margin-left: @computerMargin;\n margin-right: @computerMargin;\n padding-left: @computerGutter;\n padding-right: @computerGutter;\n }\n}\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {\n .ui.page.grid {\n width: @largeMonitorWidth;\n margin-left: @largeMonitorMargin;\n margin-right: @largeMonitorMargin;\n padding-left: @largeMonitorGutter;\n padding-right: @largeMonitorGutter;\n }\n}\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui.page.grid {\n width: @widescreenMonitorWidth;\n margin-left: @widescreenMargin;\n margin-right: @widescreenMargin;\n padding-left: @widescreenMonitorGutter;\n padding-right: @widescreenMonitorGutter;\n }\n}\n\n\n/*-------------------\n Column Count\n--------------------*/\n\n/* Assume full width with one column */\n.ui.grid > .column:only-child,\n.ui.grid > .row > .column:only-child {\n width: @oneColumn;\n}\n\n/* Grid Based */\n.ui[class*=\"one column\"].grid > .row > .column,\n.ui[class*=\"one column\"].grid > .column:not(.row) {\n width: @oneColumn;\n}\n.ui[class*=\"two column\"].grid > .row > .column,\n.ui[class*=\"two column\"].grid > .column:not(.row) {\n width: @twoColumn;\n}\n.ui[class*=\"three column\"].grid > .row > .column,\n.ui[class*=\"three column\"].grid > .column:not(.row) {\n width: @threeColumn;\n}\n.ui[class*=\"four column\"].grid > .row > .column,\n.ui[class*=\"four column\"].grid > .column:not(.row) {\n width: @fourColumn;\n}\n.ui[class*=\"five column\"].grid > .row > .column,\n.ui[class*=\"five column\"].grid > .column:not(.row) {\n width: @fiveColumn;\n}\n.ui[class*=\"six column\"].grid > .row > .column,\n.ui[class*=\"six column\"].grid > .column:not(.row) {\n width: @sixColumn;\n}\n.ui[class*=\"seven column\"].grid > .row > .column,\n.ui[class*=\"seven column\"].grid > .column:not(.row) {\n width: @sevenColumn;\n}\n.ui[class*=\"eight column\"].grid > .row > .column,\n.ui[class*=\"eight column\"].grid > .column:not(.row) {\n width: @eightColumn;\n}\n.ui[class*=\"nine column\"].grid > .row > .column,\n.ui[class*=\"nine column\"].grid > .column:not(.row) {\n width: @nineColumn;\n}\n.ui[class*=\"ten column\"].grid > .row > .column,\n.ui[class*=\"ten column\"].grid > .column:not(.row) {\n width: @tenColumn;\n}\n.ui[class*=\"eleven column\"].grid > .row > .column,\n.ui[class*=\"eleven column\"].grid > .column:not(.row) {\n width: @elevenColumn;\n}\n.ui[class*=\"twelve column\"].grid > .row > .column,\n.ui[class*=\"twelve column\"].grid > .column:not(.row) {\n width: @twelveColumn;\n}\n.ui[class*=\"thirteen column\"].grid > .row > .column,\n.ui[class*=\"thirteen column\"].grid > .column:not(.row) {\n width: @thirteenColumn;\n}\n.ui[class*=\"fourteen column\"].grid > .row > .column,\n.ui[class*=\"fourteen column\"].grid > .column:not(.row) {\n width: @fourteenColumn;\n}\n.ui[class*=\"fifteen column\"].grid > .row > .column,\n.ui[class*=\"fifteen column\"].grid > .column:not(.row) {\n width: @fifteenColumn;\n}\n.ui[class*=\"sixteen column\"].grid > .row > .column,\n.ui[class*=\"sixteen column\"].grid > .column:not(.row) {\n width: @sixteenColumn;\n}\n\n/* Row Based Overrides */\n.ui.grid > [class*=\"one column\"].row > .column {\n width: @oneColumn !important;\n}\n.ui.grid > [class*=\"two column\"].row > .column {\n width: @twoColumn !important;\n}\n.ui.grid > [class*=\"three column\"].row > .column {\n width: @threeColumn !important;\n}\n.ui.grid > [class*=\"four column\"].row > .column {\n width: @fourColumn !important;\n}\n.ui.grid > [class*=\"five column\"].row > .column {\n width: @fiveColumn !important;\n}\n.ui.grid > [class*=\"six column\"].row > .column {\n width: @sixColumn !important;\n}\n.ui.grid > [class*=\"seven column\"].row > .column {\n width: @sevenColumn !important;\n}\n.ui.grid > [class*=\"eight column\"].row > .column {\n width: @eightColumn !important;\n}\n.ui.grid > [class*=\"nine column\"].row > .column {\n width: @nineColumn !important;\n}\n.ui.grid > [class*=\"ten column\"].row > .column {\n width: @tenColumn !important;\n}\n.ui.grid > [class*=\"eleven column\"].row > .column {\n width: @elevenColumn !important;\n}\n.ui.grid > [class*=\"twelve column\"].row > .column {\n width: @twelveColumn !important;\n}\n.ui.grid > [class*=\"thirteen column\"].row > .column {\n width: @thirteenColumn !important;\n}\n.ui.grid > [class*=\"fourteen column\"].row > .column {\n width: @fourteenColumn !important;\n}\n.ui.grid > [class*=\"fifteen column\"].row > .column {\n width: @fifteenColumn !important;\n}\n.ui.grid > [class*=\"sixteen column\"].row > .column {\n width: @sixteenColumn !important;\n}\n\n/* Celled Page */\n.ui.celled.page.grid {\n box-shadow: none;\n}\n\n/*-------------------\n Column Width\n--------------------*/\n\n/* Sizing Combinations */\n.ui.grid > .row > [class*=\"one wide\"].column,\n.ui.grid > .column.row > [class*=\"one wide\"].column,\n.ui.grid > [class*=\"one wide\"].column,\n.ui.column.grid > [class*=\"one wide\"].column {\n width: @oneWide !important;\n}\n.ui.grid > .row > [class*=\"two wide\"].column,\n.ui.grid > .column.row > [class*=\"two wide\"].column,\n.ui.grid > [class*=\"two wide\"].column,\n.ui.column.grid > [class*=\"two wide\"].column {\n width: @twoWide !important;\n}\n.ui.grid > .row > [class*=\"three wide\"].column,\n.ui.grid > .column.row > [class*=\"three wide\"].column,\n.ui.grid > [class*=\"three wide\"].column,\n.ui.column.grid > [class*=\"three wide\"].column {\n width: @threeWide !important;\n}\n.ui.grid > .row > [class*=\"four wide\"].column,\n.ui.grid > .column.row > [class*=\"four wide\"].column,\n.ui.grid > [class*=\"four wide\"].column,\n.ui.column.grid > [class*=\"four wide\"].column {\n width: @fourWide !important;\n}\n.ui.grid > .row > [class*=\"five wide\"].column,\n.ui.grid > .column.row > [class*=\"five wide\"].column,\n.ui.grid > [class*=\"five wide\"].column,\n.ui.column.grid > [class*=\"five wide\"].column {\n width: @fiveWide !important;\n}\n.ui.grid > .row > [class*=\"six wide\"].column,\n.ui.grid > .column.row > [class*=\"six wide\"].column,\n.ui.grid > [class*=\"six wide\"].column,\n.ui.column.grid > [class*=\"six wide\"].column {\n width: @sixWide !important;\n}\n.ui.grid > .row > [class*=\"seven wide\"].column,\n.ui.grid > .column.row > [class*=\"seven wide\"].column,\n.ui.grid > [class*=\"seven wide\"].column,\n.ui.column.grid > [class*=\"seven wide\"].column {\n width: @sevenWide !important;\n}\n.ui.grid > .row > [class*=\"eight wide\"].column,\n.ui.grid > .column.row > [class*=\"eight wide\"].column,\n.ui.grid > [class*=\"eight wide\"].column,\n.ui.column.grid > [class*=\"eight wide\"].column {\n width: @eightWide !important;\n}\n.ui.grid > .row > [class*=\"nine wide\"].column,\n.ui.grid > .column.row > [class*=\"nine wide\"].column,\n.ui.grid > [class*=\"nine wide\"].column,\n.ui.column.grid > [class*=\"nine wide\"].column {\n width: @nineWide !important;\n}\n.ui.grid > .row > [class*=\"ten wide\"].column,\n.ui.grid > .column.row > [class*=\"ten wide\"].column,\n.ui.grid > [class*=\"ten wide\"].column,\n.ui.column.grid > [class*=\"ten wide\"].column {\n width: @tenWide !important;\n}\n.ui.grid > .row > [class*=\"eleven wide\"].column,\n.ui.grid > .column.row > [class*=\"eleven wide\"].column,\n.ui.grid > [class*=\"eleven wide\"].column,\n.ui.column.grid > [class*=\"eleven wide\"].column {\n width: @elevenWide !important;\n}\n.ui.grid > .row > [class*=\"twelve wide\"].column,\n.ui.grid > .column.row > [class*=\"twelve wide\"].column,\n.ui.grid > [class*=\"twelve wide\"].column,\n.ui.column.grid > [class*=\"twelve wide\"].column {\n width: @twelveWide !important;\n}\n.ui.grid > .row > [class*=\"thirteen wide\"].column,\n.ui.grid > .column.row > [class*=\"thirteen wide\"].column,\n.ui.grid > [class*=\"thirteen wide\"].column,\n.ui.column.grid > [class*=\"thirteen wide\"].column {\n width: @thirteenWide !important;\n}\n.ui.grid > .row > [class*=\"fourteen wide\"].column,\n.ui.grid > .column.row > [class*=\"fourteen wide\"].column,\n.ui.grid > [class*=\"fourteen wide\"].column,\n.ui.column.grid > [class*=\"fourteen wide\"].column {\n width: @fourteenWide !important;\n}\n.ui.grid > .row > [class*=\"fifteen wide\"].column,\n.ui.grid > .column.row > [class*=\"fifteen wide\"].column,\n.ui.grid > [class*=\"fifteen wide\"].column,\n.ui.column.grid > [class*=\"fifteen wide\"].column {\n width: @fifteenWide !important;\n}\n.ui.grid > .row > [class*=\"sixteen wide\"].column,\n.ui.grid > .column.row > [class*=\"sixteen wide\"].column,\n.ui.grid > [class*=\"sixteen wide\"].column,\n.ui.column.grid > [class*=\"sixteen wide\"].column {\n width: @sixteenWide !important;\n}\n\n/*----------------------\n Width per Device\n-----------------------*/\n\n/* Mobile Sizing Combinations */\n@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {\n .ui.grid > .row > [class*=\"one wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"one wide mobile\"].column,\n .ui.grid > [class*=\"one wide mobile\"].column,\n .ui.column.grid > [class*=\"one wide mobile\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"two wide mobile\"].column,\n .ui.grid > [class*=\"two wide mobile\"].column,\n .ui.column.grid > [class*=\"two wide mobile\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"three wide mobile\"].column,\n .ui.grid > [class*=\"three wide mobile\"].column,\n .ui.column.grid > [class*=\"three wide mobile\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"four wide mobile\"].column,\n .ui.grid > [class*=\"four wide mobile\"].column,\n .ui.column.grid > [class*=\"four wide mobile\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"five wide mobile\"].column,\n .ui.grid > [class*=\"five wide mobile\"].column,\n .ui.column.grid > [class*=\"five wide mobile\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"six wide mobile\"].column,\n .ui.grid > [class*=\"six wide mobile\"].column,\n .ui.column.grid > [class*=\"six wide mobile\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"seven wide mobile\"].column,\n .ui.grid > [class*=\"seven wide mobile\"].column,\n .ui.column.grid > [class*=\"seven wide mobile\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"eight wide mobile\"].column,\n .ui.grid > [class*=\"eight wide mobile\"].column,\n .ui.column.grid > [class*=\"eight wide mobile\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"nine wide mobile\"].column,\n .ui.grid > [class*=\"nine wide mobile\"].column,\n .ui.column.grid > [class*=\"nine wide mobile\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"ten wide mobile\"].column,\n .ui.grid > [class*=\"ten wide mobile\"].column,\n .ui.column.grid > [class*=\"ten wide mobile\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide mobile\"].column,\n .ui.grid > [class*=\"eleven wide mobile\"].column,\n .ui.column.grid > [class*=\"eleven wide mobile\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide mobile\"].column,\n .ui.grid > [class*=\"twelve wide mobile\"].column,\n .ui.column.grid > [class*=\"twelve wide mobile\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide mobile\"].column,\n .ui.grid > [class*=\"thirteen wide mobile\"].column,\n .ui.column.grid > [class*=\"thirteen wide mobile\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide mobile\"].column,\n .ui.grid > [class*=\"fourteen wide mobile\"].column,\n .ui.column.grid > [class*=\"fourteen wide mobile\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide mobile\"].column,\n .ui.grid > [class*=\"fifteen wide mobile\"].column,\n .ui.column.grid > [class*=\"fifteen wide mobile\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide mobile\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide mobile\"].column,\n .ui.grid > [class*=\"sixteen wide mobile\"].column,\n .ui.column.grid > [class*=\"sixteen wide mobile\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Tablet Sizing Combinations */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.grid > .row > [class*=\"one wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"one wide tablet\"].column,\n .ui.grid > [class*=\"one wide tablet\"].column,\n .ui.column.grid > [class*=\"one wide tablet\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"two wide tablet\"].column,\n .ui.grid > [class*=\"two wide tablet\"].column,\n .ui.column.grid > [class*=\"two wide tablet\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"three wide tablet\"].column,\n .ui.grid > [class*=\"three wide tablet\"].column,\n .ui.column.grid > [class*=\"three wide tablet\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"four wide tablet\"].column,\n .ui.grid > [class*=\"four wide tablet\"].column,\n .ui.column.grid > [class*=\"four wide tablet\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"five wide tablet\"].column,\n .ui.grid > [class*=\"five wide tablet\"].column,\n .ui.column.grid > [class*=\"five wide tablet\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"six wide tablet\"].column,\n .ui.grid > [class*=\"six wide tablet\"].column,\n .ui.column.grid > [class*=\"six wide tablet\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"seven wide tablet\"].column,\n .ui.grid > [class*=\"seven wide tablet\"].column,\n .ui.column.grid > [class*=\"seven wide tablet\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"eight wide tablet\"].column,\n .ui.grid > [class*=\"eight wide tablet\"].column,\n .ui.column.grid > [class*=\"eight wide tablet\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"nine wide tablet\"].column,\n .ui.grid > [class*=\"nine wide tablet\"].column,\n .ui.column.grid > [class*=\"nine wide tablet\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"ten wide tablet\"].column,\n .ui.grid > [class*=\"ten wide tablet\"].column,\n .ui.column.grid > [class*=\"ten wide tablet\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide tablet\"].column,\n .ui.grid > [class*=\"eleven wide tablet\"].column,\n .ui.column.grid > [class*=\"eleven wide tablet\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide tablet\"].column,\n .ui.grid > [class*=\"twelve wide tablet\"].column,\n .ui.column.grid > [class*=\"twelve wide tablet\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide tablet\"].column,\n .ui.grid > [class*=\"thirteen wide tablet\"].column,\n .ui.column.grid > [class*=\"thirteen wide tablet\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide tablet\"].column,\n .ui.grid > [class*=\"fourteen wide tablet\"].column,\n .ui.column.grid > [class*=\"fourteen wide tablet\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide tablet\"].column,\n .ui.grid > [class*=\"fifteen wide tablet\"].column,\n .ui.column.grid > [class*=\"fifteen wide tablet\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide tablet\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide tablet\"].column,\n .ui.grid > [class*=\"sixteen wide tablet\"].column,\n .ui.column.grid > [class*=\"sixteen wide tablet\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Computer/Desktop Sizing Combinations */\n@media only screen and (min-width: @computerBreakpoint) {\n .ui.grid > .row > [class*=\"one wide computer\"].column,\n .ui.grid > .column.row > [class*=\"one wide computer\"].column,\n .ui.grid > [class*=\"one wide computer\"].column,\n .ui.column.grid > [class*=\"one wide computer\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide computer\"].column,\n .ui.grid > .column.row > [class*=\"two wide computer\"].column,\n .ui.grid > [class*=\"two wide computer\"].column,\n .ui.column.grid > [class*=\"two wide computer\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide computer\"].column,\n .ui.grid > .column.row > [class*=\"three wide computer\"].column,\n .ui.grid > [class*=\"three wide computer\"].column,\n .ui.column.grid > [class*=\"three wide computer\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide computer\"].column,\n .ui.grid > .column.row > [class*=\"four wide computer\"].column,\n .ui.grid > [class*=\"four wide computer\"].column,\n .ui.column.grid > [class*=\"four wide computer\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide computer\"].column,\n .ui.grid > .column.row > [class*=\"five wide computer\"].column,\n .ui.grid > [class*=\"five wide computer\"].column,\n .ui.column.grid > [class*=\"five wide computer\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide computer\"].column,\n .ui.grid > .column.row > [class*=\"six wide computer\"].column,\n .ui.grid > [class*=\"six wide computer\"].column,\n .ui.column.grid > [class*=\"six wide computer\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide computer\"].column,\n .ui.grid > .column.row > [class*=\"seven wide computer\"].column,\n .ui.grid > [class*=\"seven wide computer\"].column,\n .ui.column.grid > [class*=\"seven wide computer\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide computer\"].column,\n .ui.grid > .column.row > [class*=\"eight wide computer\"].column,\n .ui.grid > [class*=\"eight wide computer\"].column,\n .ui.column.grid > [class*=\"eight wide computer\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide computer\"].column,\n .ui.grid > .column.row > [class*=\"nine wide computer\"].column,\n .ui.grid > [class*=\"nine wide computer\"].column,\n .ui.column.grid > [class*=\"nine wide computer\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide computer\"].column,\n .ui.grid > .column.row > [class*=\"ten wide computer\"].column,\n .ui.grid > [class*=\"ten wide computer\"].column,\n .ui.column.grid > [class*=\"ten wide computer\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide computer\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide computer\"].column,\n .ui.grid > [class*=\"eleven wide computer\"].column,\n .ui.column.grid > [class*=\"eleven wide computer\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide computer\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide computer\"].column,\n .ui.grid > [class*=\"twelve wide computer\"].column,\n .ui.column.grid > [class*=\"twelve wide computer\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide computer\"].column,\n .ui.grid > [class*=\"thirteen wide computer\"].column,\n .ui.column.grid > [class*=\"thirteen wide computer\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide computer\"].column,\n .ui.grid > [class*=\"fourteen wide computer\"].column,\n .ui.column.grid > [class*=\"fourteen wide computer\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide computer\"].column,\n .ui.grid > [class*=\"fifteen wide computer\"].column,\n .ui.column.grid > [class*=\"fifteen wide computer\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide computer\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide computer\"].column,\n .ui.grid > [class*=\"sixteen wide computer\"].column,\n .ui.column.grid > [class*=\"sixteen wide computer\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Large Monitor Sizing Combinations */\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){\n .ui.grid > .row > [class*=\"one wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"one wide large screen\"].column,\n .ui.grid > [class*=\"one wide large screen\"].column,\n .ui.column.grid > [class*=\"one wide large screen\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"two wide large screen\"].column,\n .ui.grid > [class*=\"two wide large screen\"].column,\n .ui.column.grid > [class*=\"two wide large screen\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"three wide large screen\"].column,\n .ui.grid > [class*=\"three wide large screen\"].column,\n .ui.column.grid > [class*=\"three wide large screen\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"four wide large screen\"].column,\n .ui.grid > [class*=\"four wide large screen\"].column,\n .ui.column.grid > [class*=\"four wide large screen\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"five wide large screen\"].column,\n .ui.grid > [class*=\"five wide large screen\"].column,\n .ui.column.grid > [class*=\"five wide large screen\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"six wide large screen\"].column,\n .ui.grid > [class*=\"six wide large screen\"].column,\n .ui.column.grid > [class*=\"six wide large screen\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"seven wide large screen\"].column,\n .ui.grid > [class*=\"seven wide large screen\"].column,\n .ui.column.grid > [class*=\"seven wide large screen\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"eight wide large screen\"].column,\n .ui.grid > [class*=\"eight wide large screen\"].column,\n .ui.column.grid > [class*=\"eight wide large screen\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"nine wide large screen\"].column,\n .ui.grid > [class*=\"nine wide large screen\"].column,\n .ui.column.grid > [class*=\"nine wide large screen\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"ten wide large screen\"].column,\n .ui.grid > [class*=\"ten wide large screen\"].column,\n .ui.column.grid > [class*=\"ten wide large screen\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide large screen\"].column,\n .ui.grid > [class*=\"eleven wide large screen\"].column,\n .ui.column.grid > [class*=\"eleven wide large screen\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide large screen\"].column,\n .ui.grid > [class*=\"twelve wide large screen\"].column,\n .ui.column.grid > [class*=\"twelve wide large screen\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide large screen\"].column,\n .ui.grid > [class*=\"thirteen wide large screen\"].column,\n .ui.column.grid > [class*=\"thirteen wide large screen\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide large screen\"].column,\n .ui.grid > [class*=\"fourteen wide large screen\"].column,\n .ui.column.grid > [class*=\"fourteen wide large screen\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide large screen\"].column,\n .ui.grid > [class*=\"fifteen wide large screen\"].column,\n .ui.column.grid > [class*=\"fifteen wide large screen\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide large screen\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide large screen\"].column,\n .ui.grid > [class*=\"sixteen wide large screen\"].column,\n .ui.column.grid > [class*=\"sixteen wide large screen\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/* Widescreen Sizing Combinations */\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui.grid > .row > [class*=\"one wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"one wide widescreen\"].column,\n .ui.grid > [class*=\"one wide widescreen\"].column,\n .ui.column.grid > [class*=\"one wide widescreen\"].column {\n width: @oneWide !important;\n }\n .ui.grid > .row > [class*=\"two wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"two wide widescreen\"].column,\n .ui.grid > [class*=\"two wide widescreen\"].column,\n .ui.column.grid > [class*=\"two wide widescreen\"].column {\n width: @twoWide !important;\n }\n .ui.grid > .row > [class*=\"three wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"three wide widescreen\"].column,\n .ui.grid > [class*=\"three wide widescreen\"].column,\n .ui.column.grid > [class*=\"three wide widescreen\"].column {\n width: @threeWide !important;\n }\n .ui.grid > .row > [class*=\"four wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"four wide widescreen\"].column,\n .ui.grid > [class*=\"four wide widescreen\"].column,\n .ui.column.grid > [class*=\"four wide widescreen\"].column {\n width: @fourWide !important;\n }\n .ui.grid > .row > [class*=\"five wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"five wide widescreen\"].column,\n .ui.grid > [class*=\"five wide widescreen\"].column,\n .ui.column.grid > [class*=\"five wide widescreen\"].column {\n width: @fiveWide !important;\n }\n .ui.grid > .row > [class*=\"six wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"six wide widescreen\"].column,\n .ui.grid > [class*=\"six wide widescreen\"].column,\n .ui.column.grid > [class*=\"six wide widescreen\"].column {\n width: @sixWide !important;\n }\n .ui.grid > .row > [class*=\"seven wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"seven wide widescreen\"].column,\n .ui.grid > [class*=\"seven wide widescreen\"].column,\n .ui.column.grid > [class*=\"seven wide widescreen\"].column {\n width: @sevenWide !important;\n }\n .ui.grid > .row > [class*=\"eight wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"eight wide widescreen\"].column,\n .ui.grid > [class*=\"eight wide widescreen\"].column,\n .ui.column.grid > [class*=\"eight wide widescreen\"].column {\n width: @eightWide !important;\n }\n .ui.grid > .row > [class*=\"nine wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"nine wide widescreen\"].column,\n .ui.grid > [class*=\"nine wide widescreen\"].column,\n .ui.column.grid > [class*=\"nine wide widescreen\"].column {\n width: @nineWide !important;\n }\n .ui.grid > .row > [class*=\"ten wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"ten wide widescreen\"].column,\n .ui.grid > [class*=\"ten wide widescreen\"].column,\n .ui.column.grid > [class*=\"ten wide widescreen\"].column {\n width: @tenWide !important;\n }\n .ui.grid > .row > [class*=\"eleven wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"eleven wide widescreen\"].column,\n .ui.grid > [class*=\"eleven wide widescreen\"].column,\n .ui.column.grid > [class*=\"eleven wide widescreen\"].column {\n width: @elevenWide !important;\n }\n .ui.grid > .row > [class*=\"twelve wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"twelve wide widescreen\"].column,\n .ui.grid > [class*=\"twelve wide widescreen\"].column,\n .ui.column.grid > [class*=\"twelve wide widescreen\"].column {\n width: @twelveWide !important;\n }\n .ui.grid > .row > [class*=\"thirteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"thirteen wide widescreen\"].column,\n .ui.grid > [class*=\"thirteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"thirteen wide widescreen\"].column {\n width: @thirteenWide !important;\n }\n .ui.grid > .row > [class*=\"fourteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"fourteen wide widescreen\"].column,\n .ui.grid > [class*=\"fourteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"fourteen wide widescreen\"].column {\n width: @fourteenWide !important;\n }\n .ui.grid > .row > [class*=\"fifteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"fifteen wide widescreen\"].column,\n .ui.grid > [class*=\"fifteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"fifteen wide widescreen\"].column {\n width: @fifteenWide !important;\n }\n .ui.grid > .row > [class*=\"sixteen wide widescreen\"].column,\n .ui.grid > .column.row > [class*=\"sixteen wide widescreen\"].column,\n .ui.grid > [class*=\"sixteen wide widescreen\"].column,\n .ui.column.grid > [class*=\"sixteen wide widescreen\"].column {\n width: @sixteenWide !important;\n }\n}\n\n/*----------------------\n Centered\n-----------------------*/\n\n.ui.centered.grid,\n.ui.centered.grid > .row,\n.ui.grid > .centered.row {\n text-align: center;\n justify-content: center;\n}\n.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),\n.ui.centered.grid > .row > .column:not(.aligned):not(.justified),\n.ui.grid .centered.row > .column:not(.aligned):not(.justified) {\n text-align: left;\n}\n\n.ui.grid > .centered.column,\n.ui.grid > .row > .centered.column {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n/*----------------------\n Relaxed\n-----------------------*/\n\n.ui.relaxed.grid > .column:not(.row),\n.ui.relaxed.grid > .row > .column,\n.ui.grid > .relaxed.row > .column {\n padding-left: (@relaxedGutterWidth / 2);\n padding-right: (@relaxedGutterWidth / 2);\n}\n\n.ui[class*=\"very relaxed\"].grid > .column:not(.row),\n.ui[class*=\"very relaxed\"].grid > .row > .column,\n.ui.grid > [class*=\"very relaxed\"].row > .column {\n padding-left: (@veryRelaxedGutterWidth / 2);\n padding-right: (@veryRelaxedGutterWidth / 2);\n}\n\n/* Coupling with UI Divider */\n.ui.relaxed.grid .row + .ui.divider,\n.ui.grid .relaxed.row + .ui.divider {\n margin-left: (@relaxedGutterWidth / 2);\n margin-right: (@relaxedGutterWidth / 2);\n}\n.ui[class*=\"very relaxed\"].grid .row + .ui.divider,\n.ui.grid [class*=\"very relaxed\"].row + .ui.divider {\n margin-left: (@veryRelaxedGutterWidth / 2);\n margin-right: (@veryRelaxedGutterWidth / 2);\n}\n\n\n/*----------------------\n Padded\n-----------------------*/\n\n.ui.padded.grid:not(.vertically):not(.horizontally) {\n margin: 0em !important;\n}\n[class*=\"horizontally padded\"].ui.grid {\n margin-left: 0em !important;\n margin-right: 0em !important;\n}\n[class*=\"vertically padded\"].ui.grid {\n margin-top: 0em !important;\n margin-bottom: 0em !important;\n}\n\n/*----------------------\n \"Floated\"\n-----------------------*/\n\n.ui.grid [class*=\"left floated\"].column {\n margin-right: auto;\n}\n.ui.grid [class*=\"right floated\"].column {\n margin-left: auto;\n}\n\n\n/*----------------------\n Divided\n-----------------------*/\n\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row),\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .row > .column {\n box-shadow: @dividedBorder;\n}\n\n/* Swap from padding to margin on columns to have dividers align */\n.ui[class*=\"vertically divided\"].grid > .column:not(.row),\n.ui[class*=\"vertically divided\"].grid > .row > .column {\n margin-top: (@rowSpacing / 2);\n margin-bottom: (@rowSpacing / 2);\n padding-top: 0rem;\n padding-bottom: 0rem;\n}\n.ui[class*=\"vertically divided\"].grid > .row {\n margin-top: 0em;\n margin-bottom: 0em;\n}\n\n\n\n/* No divider on first column on row */\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n.ui.divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: none;\n}\n\n/* No space on top of first row */\n.ui[class*=\"vertically divided\"].grid > .row:first-child > .column {\n margin-top: 0em;\n}\n\n\n/* Divided Row */\n.ui.grid > .divided.row > .column {\n box-shadow: @dividedBorder;\n}\n.ui.grid > .divided.row > .column:first-child {\n box-shadow: none;\n}\n\n/* Vertically Divided */\n.ui[class*=\"vertically divided\"].grid > .row {\n position: relative;\n}\n.ui[class*=\"vertically divided\"].grid > .row:before {\n position: absolute;\n content: \"\";\n top: 0em;\n left: 0px;\n\n width: ~\"calc(100% - \"@gutterWidth~\")\";\n height: 1px;\n\n margin: 0% (@gutterWidth / 2);\n box-shadow: @verticallyDividedBorder;\n}\n\n/* Padded Horizontally Divided */\n[class*=\"horizontally padded\"].ui.divided.grid,\n.ui.padded.divided.grid:not(.vertically):not(.horizontally) {\n width: 100%;\n}\n\n/* First Row Vertically Divided */\n.ui[class*=\"vertically divided\"].grid > .row:first-child:before {\n box-shadow: none;\n}\n\n/* Inverted Divided */\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row),\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .row > .column {\n box-shadow: @dividedInvertedBorder;\n}\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .column:not(.row):first-child,\n.ui.inverted.divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: none;\n}\n.ui.inverted[class*=\"vertically divided\"].grid > .row:before {\n box-shadow: @verticallyDividedInvertedBorder;\n}\n\n/* Relaxed */\n.ui.relaxed[class*=\"vertically divided\"].grid > .row:before {\n margin-left: (@relaxedGutterWidth / 2);\n margin-right: (@relaxedGutterWidth / 2);\n width: ~\"calc(100% - \"@relaxedGutterWidth~\")\";\n}\n.ui[class*=\"very relaxed\"][class*=\"vertically divided\"].grid > .row:before {\n margin-left: @veryRelaxedGutterWidth;\n margin-right: @veryRelaxedGutterWidth;\n width: ~\"calc(100% - \"@veryRelaxedGutterWidth~\")\";\n}\n\n/*----------------------\n Celled\n-----------------------*/\n\n.ui.celled.grid {\n width: 100%;\n margin: @celledMargin;\n box-shadow: @celledGridDivider;\n}\n\n.ui.celled.grid > .row {\n width: 100% !important;\n margin: 0em;\n padding: 0em;\n box-shadow: @celledRowDivider;\n}\n.ui.celled.grid > .column:not(.row),\n.ui.celled.grid > .row > .column {\n box-shadow: @celledColumnDivider;\n}\n\n.ui.celled.grid > .column:first-child,\n.ui.celled.grid > .row > .column:first-child {\n box-shadow: none;\n}\n\n.ui.celled.grid > .column:not(.row),\n.ui.celled.grid > .row > .column {\n padding: @celledPadding;\n}\n.ui.relaxed.celled.grid > .column:not(.row),\n.ui.relaxed.celled.grid > .row > .column {\n padding: @celledRelaxedPadding;\n}\n.ui[class*=\"very relaxed\"].celled.grid > .column:not(.row),\n.ui[class*=\"very relaxed\"].celled.grid > .row > .column {\n padding: @celledVeryRelaxedPadding;\n}\n\n/* Internally Celled */\n.ui[class*=\"internally celled\"].grid {\n box-shadow: none;\n margin: 0em;\n}\n.ui[class*=\"internally celled\"].grid > .row:first-child {\n box-shadow: none;\n}\n.ui[class*=\"internally celled\"].grid > .row > .column:first-child {\n box-shadow: none;\n}\n\n/*----------------------\n Vertically Aligned\n-----------------------*/\n\n/* Top Aligned */\n.ui[class*=\"top aligned\"].grid > .column:not(.row),\n.ui[class*=\"top aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"top aligned\"].row > .column,\n.ui.grid > [class*=\"top aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"top aligned\"].column {\n flex-direction: column;\n vertical-align: top;\n align-self: flex-start !important;\n}\n\n/* Middle Aligned */\n.ui[class*=\"middle aligned\"].grid > .column:not(.row),\n.ui[class*=\"middle aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"middle aligned\"].row > .column,\n.ui.grid > [class*=\"middle aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"middle aligned\"].column {\n flex-direction: column;\n vertical-align: middle;\n align-self: center !important;\n}\n\n/* Bottom Aligned */\n.ui[class*=\"bottom aligned\"].grid > .column:not(.row),\n.ui[class*=\"bottom aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"bottom aligned\"].row > .column,\n.ui.grid > [class*=\"bottom aligned\"].column:not(.row),\n.ui.grid > .row > [class*=\"bottom aligned\"].column {\n flex-direction: column;\n vertical-align: bottom;\n align-self: flex-end !important;\n}\n\n/* Stretched */\n.ui.stretched.grid > .row > .column,\n.ui.stretched.grid > .column,\n.ui.grid > .stretched.row > .column,\n.ui.grid > .stretched.column:not(.row),\n.ui.grid > .row > .stretched.column {\n display: inline-flex !important;\n align-self: stretch;\n flex-direction: column;\n}\n\n.ui.stretched.grid > .row > .column > *,\n.ui.stretched.grid > .column > *,\n.ui.grid > .stretched.row > .column > *,\n.ui.grid > .stretched.column:not(.row) > *,\n.ui.grid > .row > .stretched.column > * {\n flex-grow: 1;\n}\n\n/*----------------------\n Horizontally Centered\n-----------------------*/\n\n/* Left Aligned */\n.ui[class*=\"left aligned\"].grid > .column,\n.ui[class*=\"left aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"left aligned\"].row > .column,\n.ui.grid > [class*=\"left aligned\"].column.column,\n.ui.grid > .row > [class*=\"left aligned\"].column.column {\n text-align: left;\n align-self: inherit;\n}\n\n/* Center Aligned */\n.ui[class*=\"center aligned\"].grid > .column,\n.ui[class*=\"center aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"center aligned\"].row > .column,\n.ui.grid > [class*=\"center aligned\"].column.column,\n.ui.grid > .row > [class*=\"center aligned\"].column.column {\n text-align: center;\n align-self: inherit;\n}\n.ui[class*=\"center aligned\"].grid {\n justify-content: center;\n}\n\n/* Right Aligned */\n.ui[class*=\"right aligned\"].grid > .column,\n.ui[class*=\"right aligned\"].grid > .row > .column,\n.ui.grid > [class*=\"right aligned\"].row > .column,\n.ui.grid > [class*=\"right aligned\"].column.column,\n.ui.grid > .row > [class*=\"right aligned\"].column.column {\n text-align: right;\n align-self: inherit;\n}\n\n/* Justified */\n.ui.justified.grid > .column,\n.ui.justified.grid > .row > .column,\n.ui.grid > .justified.row > .column,\n.ui.grid > .justified.column.column,\n.ui.grid > .row > .justified.column.column {\n text-align: justify;\n hyphens: auto;\n}\n\n/*----------------------\n Colored\n-----------------------*/\n\n.ui.grid > .row > .red.column,\n.ui.grid > .row > .orange.column,\n.ui.grid > .row > .yellow.column,\n.ui.grid > .row > .olive.column,\n.ui.grid > .row > .green.column,\n.ui.grid > .row > .teal.column,\n.ui.grid > .row > .blue.column,\n.ui.grid > .row > .violet.column,\n.ui.grid > .row > .purple.column,\n.ui.grid > .row > .pink.column,\n.ui.grid > .row > .brown.column,\n.ui.grid > .row > .grey.column,\n.ui.grid > .row > .black.column {\n margin-top: -(@rowSpacing / 2);\n margin-bottom: -(@rowSpacing / 2);\n padding-top: (@rowSpacing / 2);\n padding-bottom: (@rowSpacing / 2);\n}\n\n/* Red */\n.ui.grid > .red.row,\n.ui.grid > .red.column,\n.ui.grid > .row > .red.column {\n background-color: @red !important;\n color: @white;\n}\n/* Orange */\n.ui.grid > .orange.row,\n.ui.grid > .orange.column,\n.ui.grid > .row > .orange.column {\n background-color: @orange !important;\n color: @white;\n}\n/* Yellow */\n.ui.grid > .yellow.row,\n.ui.grid > .yellow.column,\n.ui.grid > .row > .yellow.column {\n background-color: @yellow !important;\n color: @white;\n}\n/* Olive */\n.ui.grid > .olive.row,\n.ui.grid > .olive.column,\n.ui.grid > .row > .olive.column {\n background-color: @olive !important;\n color: @white;\n}\n/* Green */\n.ui.grid > .green.row,\n.ui.grid > .green.column,\n.ui.grid > .row > .green.column {\n background-color: @green !important;\n color: @white;\n}\n/* Teal */\n.ui.grid > .teal.row,\n.ui.grid > .teal.column,\n.ui.grid > .row > .teal.column {\n background-color: @teal !important;\n color: @white;\n}\n/* Blue */\n.ui.grid > .blue.row,\n.ui.grid > .blue.column,\n.ui.grid > .row > .blue.column {\n background-color: @blue !important;\n color: @white;\n}\n/* Violet */\n.ui.grid > .violet.row,\n.ui.grid > .violet.column,\n.ui.grid > .row > .violet.column {\n background-color: @violet !important;\n color: @white;\n}\n/* Purple */\n.ui.grid > .purple.row,\n.ui.grid > .purple.column,\n.ui.grid > .row > .purple.column {\n background-color: @purple !important;\n color: @white;\n}\n/* Pink */\n.ui.grid > .pink.row,\n.ui.grid > .pink.column,\n.ui.grid > .row > .pink.column {\n background-color: @pink !important;\n color: @white;\n}\n/* Brown */\n.ui.grid > .brown.row,\n.ui.grid > .brown.column,\n.ui.grid > .row > .brown.column {\n background-color: @brown !important;\n color: @white;\n}\n/* Grey */\n.ui.grid > .grey.row,\n.ui.grid > .grey.column,\n.ui.grid > .row > .grey.column {\n background-color: @grey !important;\n color: @white;\n}\n/* Black */\n.ui.grid > .black.row,\n.ui.grid > .black.column,\n.ui.grid > .row > .black.column {\n background-color: @black !important;\n color: @white;\n}\n\n\n/*----------------------\n Equal Width\n-----------------------*/\n\n.ui[class*=\"equal width\"].grid > .column:not(.row),\n.ui[class*=\"equal width\"].grid > .row > .column,\n.ui.grid > [class*=\"equal width\"].row > .column {\n display: inline-block;\n flex-grow: 1;\n}\n.ui[class*=\"equal width\"].grid > .wide.column,\n.ui[class*=\"equal width\"].grid > .row > .wide.column,\n.ui.grid > [class*=\"equal width\"].row > .wide.column {\n flex-grow: 0;\n}\n\n\n/*----------------------\n Reverse\n-----------------------*/\n\n\n/* Mobile */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui[class*=\"mobile reversed\"].grid,\n .ui[class*=\"mobile reversed\"].grid > .row,\n .ui.grid > [class*=\"mobile reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"mobile vertically reversed\"].grid,\n .ui.stackable[class*=\"mobile reversed\"] {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"mobile reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"mobile vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"mobile vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"mobile reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"mobile reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n/* Tablet */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui[class*=\"tablet reversed\"].grid,\n .ui[class*=\"tablet reversed\"].grid > .row,\n .ui.grid > [class*=\"tablet reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"tablet vertically reversed\"].grid {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"tablet reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"tablet vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"tablet vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"tablet reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"tablet reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n/* Computer */\n@media only screen and (min-width: @computerBreakpoint) {\n .ui[class*=\"computer reversed\"].grid,\n .ui[class*=\"computer reversed\"].grid > .row,\n .ui.grid > [class*=\"computer reversed\"].row {\n flex-direction: row-reverse;\n }\n .ui[class*=\"computer vertically reversed\"].grid {\n flex-direction: column-reverse;\n }\n\n /* Divided Reversed */\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:first-child,\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:first-child {\n box-shadow: @dividedBorder;\n }\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .column:last-child,\n .ui[class*=\"computer reversed\"].divided.grid:not([class*=\"vertically divided\"]) > .row > .column:last-child {\n box-shadow: none;\n }\n /* Vertically Divided Reversed */\n .ui.grid[class*=\"vertically divided\"][class*=\"computer vertically reversed\"] > .row:first-child:before {\n box-shadow: @verticallyDividedBorder;\n }\n .ui.grid[class*=\"vertically divided\"][class*=\"computer vertically reversed\"] > .row:last-child:before {\n box-shadow: none;\n }\n /* Celled Reversed */\n .ui[class*=\"computer reversed\"].celled.grid > .row > .column:first-child {\n box-shadow: @celledColumnDivider;\n }\n .ui[class*=\"computer reversed\"].celled.grid > .row > .column:last-child {\n box-shadow: none;\n }\n}\n\n\n/*-------------------\n Doubling\n--------------------*/\n\n/* Tablet Only */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.doubling.grid {\n width: auto;\n }\n .ui.grid > .doubling.row,\n .ui.doubling.grid > .row {\n margin: 0em !important;\n padding: 0em !important;\n }\n .ui.grid > .doubling.row > .column,\n .ui.doubling.grid > .row > .column {\n display: inline-block !important;\n padding-top: (@rowSpacing / 2) !important;\n padding-bottom: (@rowSpacing / 2) !important;\n box-shadow: none !important;\n margin: 0em;\n }\n .ui[class*=\"two column\"].doubling.grid > .row > .column,\n .ui[class*=\"two column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"two column\"].doubling.row.row > .column {\n width: @oneColumn !important;\n }\n .ui[class*=\"three column\"].doubling.grid > .row > .column,\n .ui[class*=\"three column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"three column\"].doubling.row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"four column\"].doubling.grid > .row > .column,\n .ui[class*=\"four column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"four column\"].doubling.row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"five column\"].doubling.grid > .row > .column,\n .ui[class*=\"five column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"five column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"six column\"].doubling.grid > .row > .column,\n .ui[class*=\"six column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"six column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"seven column\"].doubling.grid > .row > .column,\n .ui[class*=\"seven column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"seven column\"].doubling.row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"eight column\"].doubling.grid > .row > .column,\n .ui[class*=\"eight column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"eight column\"].doubling.row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"nine column\"].doubling.grid > .row > .column,\n .ui[class*=\"nine column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"nine column\"].doubling.row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"ten column\"].doubling.grid > .row > .column,\n .ui[class*=\"ten column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"ten column\"].doubling.row.row > .column {\n width: @fiveColumn !important;\n }\n .ui[class*=\"eleven column\"].doubling.grid > .row > .column,\n .ui[class*=\"eleven column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"eleven column\"].doubling.row.row > .column {\n width: @fiveColumn !important;\n }\n .ui[class*=\"twelve column\"].doubling.grid > .row > .column,\n .ui[class*=\"twelve column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"twelve column\"].doubling.row.row > .column {\n width: @sixColumn !important;\n }\n .ui[class*=\"thirteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"thirteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"thirteen column\"].doubling.row.row > .column {\n width: @sixColumn !important;\n }\n .ui[class*=\"fourteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"fourteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"fourteen column\"].doubling.row.row > .column {\n width: @sevenColumn !important;\n }\n .ui[class*=\"fifteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"fifteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"fifteen column\"].doubling.row.row > .column {\n width: @sevenColumn !important;\n }\n .ui[class*=\"sixteen column\"].doubling.grid > .row > .column,\n .ui[class*=\"sixteen column\"].doubling.grid > .column:not(.row),\n .ui.grid > [class*=\"sixteen column\"].doubling.row.row > .column {\n width: @eightColumn !important;\n }\n}\n\n/* Mobile Only */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.grid > .doubling.row,\n .ui.doubling.grid > .row {\n margin: 0em !important;\n padding: 0em !important;\n }\n .ui.grid > .doubling.row > .column,\n .ui.doubling.grid > .row > .column {\n padding-top: (@rowSpacing / 2) !important;\n padding-bottom: (@rowSpacing / 2) !important;\n margin: 0em !important;\n box-shadow: none !important;\n }\n .ui[class*=\"two column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"two column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"two column\"].doubling:not(.stackable).row.row > .column {\n width: @oneColumn !important;\n }\n .ui[class*=\"three column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"three column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"three column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"four column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"four column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"four column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"five column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"five column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"five column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"six column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"six column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"six column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"seven column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"seven column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"seven column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"eight column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"eight column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"eight column\"].doubling:not(.stackable).row.row > .column {\n width: @twoColumn !important;\n }\n .ui[class*=\"nine column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"nine column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"nine column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"ten column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"ten column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"ten column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"eleven column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"eleven column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"eleven column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"twelve column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"twelve column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"twelve column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"thirteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"thirteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"thirteen column\"].doubling:not(.stackable).row.row > .column {\n width: @threeColumn !important;\n }\n .ui[class*=\"fourteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"fourteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"fourteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"fifteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"fifteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"fifteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n .ui[class*=\"sixteen column\"].doubling:not(.stackable).grid > .row > .column,\n .ui[class*=\"sixteen column\"].doubling:not(.stackable).grid > .column:not(.row),\n .ui.grid > [class*=\"sixteen column\"].doubling:not(.stackable).row.row > .column {\n width: @fourColumn !important;\n }\n}\n\n/*-------------------\n Stackable\n--------------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.stackable.grid {\n width: auto;\n margin-left: 0em !important;\n margin-right: 0em !important;\n }\n .ui.stackable.grid > .row > .wide.column,\n .ui.stackable.grid > .wide.column,\n .ui.stackable.grid > .column.grid > .column,\n .ui.stackable.grid > .column.row > .column,\n .ui.stackable.grid > .row > .column,\n .ui.stackable.grid > .column:not(.row),\n .ui.grid > .stackable.stackable.row > .column {\n width: 100% !important;\n margin: 0em 0em !important;\n box-shadow: none !important;\n padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;\n }\n .ui.stackable.grid:not(.vertically) > .row {\n margin: 0em;\n padding: 0em;\n }\n\n /* Coupling */\n .ui.container > .ui.stackable.grid > .column,\n .ui.container > .ui.stackable.grid > .row > .column {\n padding-left: 0em !important;\n padding-right: 0em !important;\n }\n\n /* Don't pad inside segment or nested grid */\n .ui.grid .ui.stackable.grid,\n .ui.segment:not(.vertical) .ui.stackable.page.grid {\n margin-left: -(@stackableGutter / 2) !important;\n margin-right: -(@stackableGutter / 2) !important;\n }\n\n /* Divided Stackable */\n .ui.stackable.divided.grid > .row:first-child > .column:first-child,\n .ui.stackable.celled.grid > .row:first-child > .column:first-child,\n .ui.stackable.divided.grid > .column:not(.row):first-child,\n .ui.stackable.celled.grid > .column:not(.row):first-child {\n border-top: none !important;\n }\n .ui.inverted.stackable.celled.grid > .column:not(.row),\n .ui.inverted.stackable.divided.grid > .column:not(.row),\n .ui.inverted.stackable.celled.grid > .row > .column,\n .ui.inverted.stackable.divided.grid > .row > .column {\n border-top: @stackableInvertedMobileBorder;\n }\n\n .ui.stackable.celled.grid > .column:not(.row),\n .ui.stackable.divided:not(.vertically).grid > .column:not(.row),\n .ui.stackable.celled.grid > .row > .column,\n .ui.stackable.divided:not(.vertically).grid > .row > .column {\n border-top: @stackableMobileBorder;\n box-shadow: none !important;\n padding-top: @stackableRowSpacing !important;\n padding-bottom: @stackableRowSpacing !important;\n }\n\n .ui.stackable.celled.grid > .row {\n box-shadow: none !important;\n }\n .ui.stackable.divided:not(.vertically).grid > .column:not(.row),\n .ui.stackable.divided:not(.vertically).grid > .row > .column {\n padding-left: 0em !important;\n padding-right: 0em !important;\n }\n\n}\n\n/*----------------------\n Only (Device)\n-----------------------*/\n\n\n/* These include arbitrary class repetitions for forced specificity */\n\n/* Mobile Only Hide */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"computer only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"computer only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"computer only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"computer only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n/* Tablet Only Hide */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.tablet),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.tablet),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.tablet),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.tablet) {\n display: none !important;\n }\n .ui[class*=\"computer only\"].grid.grid.grid:not(.tablet),\n .ui.grid.grid.grid > [class*=\"computer only\"].row:not(.tablet),\n .ui.grid.grid.grid > [class*=\"computer only\"].column:not(.tablet),\n .ui.grid.grid.grid > .row > [class*=\"computer only\"].column:not(.tablet) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Computer Only Hide */\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"large screen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"large screen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"large screen only\"].column:not(.mobile) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Large Screen Only Hide */\n@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"widescreen only\"].grid.grid.grid:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].row:not(.mobile),\n .ui.grid.grid.grid > [class*=\"widescreen only\"].column:not(.mobile),\n .ui.grid.grid.grid > .row > [class*=\"widescreen only\"].column:not(.mobile) {\n display: none !important;\n }\n}\n\n/* Widescreen Only Hide */\n@media only screen and (min-width: @widescreenMonitorBreakpoint) {\n .ui[class*=\"mobile only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"mobile only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"mobile only\"].column:not(.computer) {\n display: none !important;\n }\n .ui[class*=\"tablet only\"].grid.grid.grid:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].row:not(.computer),\n .ui.grid.grid.grid > [class*=\"tablet only\"].column:not(.computer),\n .ui.grid.grid.grid > .row > [class*=\"tablet only\"].column:not(.computer) {\n display: none !important;\n }\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/collections/menu.less", "content": "/*\n * # Semantic - Menu\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Copyright 2015 Contributor\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'menu';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Standard\n*******************************/\n\n/*--------------\n Menu\n---------------*/\n\n.ui.menu {\n display: flex;\n margin: @margin;\n font-family: @fontFamily;\n background: @background;\n font-weight: @fontWeight;\n border: @border;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n min-height: @minHeight;\n}\n\n.ui.menu:after {\n content: '';\n display: block;\n height: 0px;\n clear: both;\n visibility: hidden;\n}\n\n.ui.menu:first-child {\n margin-top: 0rem;\n}\n.ui.menu:last-child {\n margin-bottom: 0rem;\n}\n\n\n/*--------------\n Sub-Menu\n---------------*/\n\n.ui.menu .menu {\n margin: 0em;\n}\n\n.ui.menu:not(.vertical) > .menu {\n display: flex;\n}\n\n/*--------------\n Item\n---------------*/\n\n.ui.menu:not(.vertical) .item {\n display: flex;\n align-items: center;\n}\n\n.ui.menu .item {\n position: relative;\n vertical-align: middle;\n line-height: 1;\n text-decoration: none;\n -webkit-tap-highlight-color: transparent;\n flex: 0 0 auto;\n user-select: none;\n\n background: @itemBackground;\n padding: @itemVerticalPadding @itemHorizontalPadding;\n text-transform: @itemTextTransform;\n color: @itemTextColor;\n font-weight: @itemFontWeight;\n transition: @itemTransition;\n}\n\n.ui.menu > .item:first-child {\n border-radius: @borderRadius 0px 0px @borderRadius;\n}\n\n/* Border */\n.ui.menu .item:before {\n position: absolute;\n content: '';\n top: 0%;\n right: 0px;\n height: 100%;\n\n width: @dividerSize;\n background: @dividerBackground;\n}\n\n/*--------------\n Text Content\n---------------*/\n\n.ui.menu .text.item > *,\n.ui.menu .item > a:not(.ui),\n.ui.menu .item > p:only-child {\n user-select: text;\n line-height: @textLineHeight;\n}\n.ui.menu .item > p:first-child {\n margin-top: 0;\n}\n.ui.menu .item > p:last-child {\n margin-bottom: 0;\n}\n\n/*--------------\n Icons\n---------------*/\n\n.ui.menu .item > i.icon {\n opacity: @iconOpacity;\n float: @iconFloat;\n margin: @iconMargin;\n}\n\n/*--------------\n Button\n---------------*/\n\n.ui.menu:not(.vertical) .item > .button {\n position: relative;\n top: @buttonOffset;\n margin: @buttonMargin;\n padding-bottom: @buttonVerticalPadding;\n padding-top: @buttonVerticalPadding;\n font-size: @buttonSize;\n}\n\n/*----------------\n Grid / Container\n-----------------*/\n\n.ui.menu > .grid,\n.ui.menu > .container {\n display: flex;\n align-items: inherit;\n flex-direction: inherit;\n}\n\n/*--------------\n Inputs\n---------------*/\n\n.ui.menu .item > .input {\n width: 100%;\n}\n.ui.menu:not(.vertical) .item > .input {\n position: relative;\n top: @inputOffset;\n margin: @inputVerticalMargin 0em;\n}\n.ui.menu .item > .input input {\n font-size: @inputSize;\n padding-top: @inputVerticalPadding;\n padding-bottom: @inputVerticalPadding;\n}\n\n\n/*--------------\n Header\n---------------*/\n\n.ui.menu .header.item,\n.ui.vertical.menu .header.item {\n margin: 0em;\n background: @headerBackground;\n text-transform: @headerTextTransform;\n font-weight: @headerWeight;\n}\n\n.ui.vertical.menu .item > .header:not(.ui) {\n margin: @verticalHeaderMargin;\n font-size: @verticalHeaderFontSize;\n font-weight: @verticalHeaderFontWeight;\n}\n\n/*--------------\n Dropdowns\n---------------*/\n\n\n/* Dropdown Icon */\n.ui.menu .item > i.dropdown.icon {\n padding: 0em;\n float: @dropdownIconFloat;\n margin: 0em 0em 0em @dropdownIconDistance;\n}\n\n/* Menu */\n.ui.menu .dropdown.item .menu {\n min-width: ~\"calc(100% - 1px)\";\n border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;\n background: @dropdownBackground;\n margin: @dropdownMenuDistance 0px 0px;\n box-shadow: @dropdownMenuBoxShadow;\n flex-direction: column !important;\n}\n\n\n/* Menu Items */\n.ui.menu .ui.dropdown .menu > .item {\n margin: 0;\n text-align: left;\n font-size: @dropdownItemFontSize !important;\n padding: @dropdownItemPadding !important;\n background: @dropdownItemBackground !important;\n color: @dropdownItemColor !important;\n text-transform: @dropdownItemTextTransform !important;\n font-weight: @dropdownItemFontWeight !important;\n box-shadow: @dropdownItemBoxShadow !important;\n transition: @dropdownItemTransition !important;\n}\n.ui.menu .ui.dropdown .menu > .item:hover {\n background: @dropdownHoveredItemBackground !important;\n color: @dropdownHoveredItemColor !important;\n}\n.ui.menu .ui.dropdown .menu > .selected.item {\n background: @dropdownSelectedItemBackground !important;\n color: @dropdownSelectedItemColor !important;\n}\n.ui.menu .ui.dropdown .menu > .active.item {\n background: @dropdownActiveItemBackground !important;\n font-weight: @dropdownActiveItemFontWeight !important;\n color: @dropdownActiveItemColor !important;\n}\n\n.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {\n display: block;\n}\n.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {\n display: inline-block;\n font-size: @dropdownItemIconFontSize !important;\n float: @dropdownItemIconFloat;\n margin: @dropdownItemIconMargin;\n}\n\n\n/* Secondary */\n.ui.secondary.menu .dropdown.item > .menu,\n.ui.text.menu .dropdown.item > .menu {\n border-radius: @dropdownMenuBorderRadius;\n margin-top: @secondaryDropdownMenuDistance;\n}\n\n/* Pointing */\n.ui.menu .pointing.dropdown.item .menu {\n margin-top: @pointingDropdownMenuDistance;\n}\n\n/* Inverted */\n.ui.inverted.menu .search.dropdown.item > .search,\n.ui.inverted.menu .search.dropdown.item > .text {\n color: @invertedSelectionDropdownColor;\n}\n\n/* Vertical */\n.ui.vertical.menu .dropdown.item > .icon {\n float: right;\n content: \"\\f0da\";\n margin-left: 1em;\n}\n.ui.vertical.menu .dropdown.item .menu {\n left: 100%;\n min-width: 0;\n margin: 0em 0em 0em @dropdownMenuDistance;\n box-shadow: @dropdownVerticalMenuBoxShadow;\n border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius;\n}\n.ui.vertical.menu .dropdown.item.upward .menu {\n bottom: 0;\n}\n.ui.vertical.menu .dropdown.item:not(.upward) .menu {\n top: 0;\n}\n.ui.vertical.menu .active.dropdown.item {\n border-top-right-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n.ui.vertical.menu .dropdown.active.item {\n box-shadow: none;\n}\n\n/* Evenly Divided */\n.ui.item.menu .dropdown .menu .item {\n width: 100%;\n}\n\n/*--------------\n Labels\n---------------*/\n\n.ui.menu .item > .label {\n background: @labelBackground;\n color: @labelTextColor;\n margin-left: @labelTextMargin;\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n.ui.vertical.menu .item > .label {\n background: @labelBackground;\n color: @labelTextColor;\n margin-top: @labelOffset;\n margin-bottom: @labelOffset;\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n.ui.menu .item > .floating.label {\n padding: @labelVerticalPadding @labelHorizontalPadding;\n}\n\n/*--------------\n Images\n---------------*/\n\n.ui.menu .item > img:not(.ui) {\n display: inline-block;\n vertical-align: middle;\n margin: @imageMargin;\n width: @imageWidth;\n}\n.ui.vertical.menu .item > img:not(.ui):only-child {\n display: block;\n max-width: 100%;\n width: @verticalImageWidth;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n/*--------------\n List\n---------------*/\n\n/* Menu divider shouldnt apply */\n.ui.menu .list .item:before {\n background: none !important;\n}\n\n/*--------------\n Sidebar\n---------------*/\n\n/* Show vertical dividers below last */\n\n.ui.vertical.sidebar.menu > .item:first-child:before {\n display: block !important;\n}\n.ui.vertical.sidebar.menu > .item::before {\n top: auto;\n bottom: 0px;\n}\n\n/*--------------\n Container\n---------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.menu > .ui.container {\n width: 100% !important;\n margin-left: 0em !important;\n margin-right: 0em !important;\n }\n}\n@media only screen and (min-width: @tabletBreakpoint) {\n .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {\n border-left: @dividerSize solid @dividerBackground;\n }\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Hover\n---------------*/\n\n\n.ui.link.menu .item:hover,\n.ui.menu .dropdown.item:hover,\n.ui.menu .link.item:hover,\n.ui.menu a.item:hover {\n cursor: pointer;\n background: @hoverItemBackground;\n color: @hoverItemTextColor;\n}\n\n\n/*--------------\n Pressed\n---------------*/\n\n.ui.link.menu .item:active,\n.ui.menu .link.item:active,\n.ui.menu a.item:active {\n background: @pressedItemBackground;\n color: @pressedItemTextColor;\n}\n\n\n/*--------------\n Active\n---------------*/\n\n.ui.menu .active.item {\n background: @activeItemBackground;\n color: @activeItemTextColor;\n font-weight: @activeItemFontWeight;\n box-shadow: @activeItemBoxShadow;\n}\n.ui.menu .active.item > i.icon {\n opacity: @activeIconOpacity;\n}\n\n/*--------------\n Active Hover\n---------------*/\n\n.ui.menu .active.item:hover,\n.ui.vertical.menu .active.item:hover {\n background-color: @activeHoverItemBackground;\n color: @activeHoverItemColor;\n}\n\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.menu .item.disabled,\n.ui.menu .item.disabled:hover {\n cursor: default !important;\n background-color: transparent !important;\n color: @disabledTextColor !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*------------------\nFloated Menu / Item\n-------------------*/\n\n/* Left Floated */\n.ui.menu:not(.vertical) .left.item,\n.ui.menu:not(.vertical) .left.menu {\n display: flex;\n margin-right: auto !important;\n}\n/* Right Floated */\n.ui.menu:not(.vertical) .right.item,\n.ui.menu:not(.vertical) .right.menu {\n display: flex;\n margin-left: auto !important;\n}\n\n/* Swapped Borders */\n.ui.menu .right.item::before,\n.ui.menu .right.menu > .item::before {\n right: auto;\n left: 0;\n}\n\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.menu {\n display: block;\n flex-direction: column;\n background: @verticalBackground;\n box-shadow: @verticalBoxShadow;\n}\n\n/*--- Item ---*/\n.ui.vertical.menu .item {\n display: block;\n background: @verticalItemBackground;\n border-top: none;\n border-right: none;\n}\n.ui.vertical.menu > .item:first-child {\n border-radius: @borderRadius @borderRadius 0px 0px;\n}\n.ui.vertical.menu > .item:last-child {\n border-radius: 0px 0px @borderRadius @borderRadius;\n}\n\n/*--- Label ---*/\n.ui.vertical.menu .item > .label {\n float: right;\n text-align: center;\n}\n\n/*--- Icon ---*/\n.ui.vertical.menu .item > i.icon {\n width: @iconWidth;\n float: @verticalIconFloat;\n margin: @verticalIconMargin;\n}\n.ui.vertical.menu .item > .label + i.icon {\n float: @labelAndIconFloat;\n margin: @labelAndIconMargin;\n}\n\n\n/*--- Border ---*/\n.ui.vertical.menu .item:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0px;\n width: 100%;\n height: @dividerSize;\n background: @verticalDividerBackground;\n}\n\n.ui.vertical.menu .item:first-child:before {\n display: none !important;\n}\n\n\n/*--- Sub Menu ---*/\n.ui.vertical.menu .item > .menu {\n margin: @subMenuMargin;\n}\n.ui.vertical.menu .menu .item {\n background: none;\n padding: @subMenuVerticalPadding @subMenuHorizontalPadding;\n font-size: @subMenuFontSize;\n color: @subMenuTextColor;\n}\n.ui.vertical.menu .item .menu a.item:hover,\n.ui.vertical.menu .item .menu .link.item:hover {\n color: @darkTextColor;\n}\n.ui.vertical.menu .menu .item:before {\n display: none;\n}\n\n/* Vertical Active */\n.ui.vertical.menu .active.item {\n background: @activeItemBackground;\n border-radius: 0em;\n box-shadow: @verticalActiveBoxShadow;\n}\n.ui.vertical.menu > .active.item:first-child {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.vertical.menu > .active.item:last-child {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui.vertical.menu > .active.item:only-child {\n border-radius: @borderRadius;\n}\n.ui.vertical.menu .active.item .menu .active.item {\n border-left: none;\n}\n.ui.vertical.menu .item .menu .active.item {\n background-color: @subMenuActiveBackground;\n font-weight: @subMenuActiveFontWeight;\n color: @subMenuActiveTextColor;\n}\n\n\n/*--------------\n Tabular\n---------------*/\n\n.ui.tabular.menu {\n border-radius: 0em;\n box-shadow: none !important;\n border: none;\n background: @tabularBackground;\n border-bottom: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.tabular.fluid.menu {\n width: @tabularFluidWidth !important;\n}\n.ui.tabular.menu .item {\n background: transparent;\n border-bottom: none;\n\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-top: @tabularOppositeBorderWidth solid transparent;\n padding: @tabularVerticalPadding @tabularHorizontalPadding;\n color: @tabularTextColor;\n}\n.ui.tabular.menu .item:before {\n display: none;\n}\n\n/* Hover */\n.ui.tabular.menu .item:hover {\n background-color: transparent;\n color: @tabularHoveredTextColor;\n}\n\n/* Active */\n.ui.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-top-width: @tabularBorderWidth;\n border-color: @tabularBorderColor;\n font-weight: @tabularActiveWeight;\n margin-bottom: -@tabularBorderWidth;\n box-shadow: @tabularActiveBoxShadow;\n border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important;\n}\n\n/* Coupling with segment for attachment */\n.ui.tabular.menu + .attached:not(.top).segment,\n.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {\n border-top: none;\n margin-left: 0px;\n margin-top: 0px;\n margin-right: 0px;\n width: 100%;\n}\n.top.attached.segment + .ui.bottom.tabular.menu {\n position: relative;\n width: @tabularFluidWidth;\n left: -@tabularFluidOffset;\n}\n\n/* Bottom Vertical Tabular */\n.ui.bottom.tabular.menu {\n background: @tabularBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-top: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.bottom.tabular.menu .item {\n background: none;\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: none;\n}\n.ui.bottom.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: -@tabularBorderWidth 0px 0px 0px;\n border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important;\n}\n\n/* Vertical Tabular (Left) */\n.ui.vertical.tabular.menu {\n background: @tabularVerticalBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-right: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.vertical.tabular.menu .item {\n background: none;\n border-left: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: @tabularBorderWidth solid transparent;\n border-right: none;\n}\n.ui.vertical.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: 0px -@tabularBorderWidth 0px 0px;\n border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important;\n}\n\n/* Vertical Right Tabular */\n.ui.vertical.right.tabular.menu {\n background: @tabularVerticalBackground;\n border-radius: 0em;\n box-shadow: none !important;\n border-bottom: none;\n border-right: none;\n border-left: @tabularBorderWidth solid @tabularBorderColor;\n}\n.ui.vertical.right.tabular.menu .item {\n background: none;\n border-right: @tabularBorderWidth solid transparent;\n border-bottom: @tabularBorderWidth solid transparent;\n border-top: @tabularBorderWidth solid transparent;\n border-left: none;\n}\n.ui.vertical.right.tabular.menu .active.item {\n background: @tabularActiveBackground;\n color: @tabularActiveColor;\n border-color: @tabularBorderColor;\n margin: 0px 0px 0px -@tabularBorderWidth;\n border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important;\n}\n\n/* Dropdown */\n.ui.tabular.menu .active.dropdown.item {\n margin-bottom: 0px;\n border-left: @tabularBorderWidth solid transparent;\n border-right: @tabularBorderWidth solid transparent;\n border-top: @tabularOppositeBorderWidth solid transparent;\n border-bottom: none;\n}\n\n\n\n/*--------------\n Pagination\n---------------*/\n\n.ui.pagination.menu {\n margin: 0em;\n display: inline-flex;\n vertical-align: middle;\n}\n.ui.pagination.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.compact.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.pagination.menu .item:last-child:before {\n display: none;\n}\n\n.ui.pagination.menu .item {\n min-width: @paginationMinWidth;\n text-align: center;\n}\n.ui.pagination.menu .icon.item i.icon {\n vertical-align: top;\n}\n\n/* Active */\n.ui.pagination.menu .active.item {\n border-top: none;\n padding-top: @itemVerticalPadding;\n background-color: @paginationActiveBackground;\n color: @paginationActiveTextColor;\n box-shadow: none;\n}\n\n/*--------------\n Secondary\n---------------*/\n\n.ui.secondary.menu {\n background: @secondaryBackground;\n margin-left: -@secondaryItemSpacing;\n margin-right: -@secondaryItemSpacing;\n border-radius: 0em;\n border: none;\n box-shadow: none;\n}\n\n/* Item */\n.ui.secondary.menu .item {\n align-self: center;\n box-shadow: none;\n border: none;\n padding: @secondaryItemPadding;\n margin: @secondaryItemMargin;\n background: @secondaryItemBackground;\n transition: @secondaryItemTransition;\n border-radius: @secondaryItemBorderRadius;\n}\n\n/* No Divider */\n.ui.secondary.menu .item:before {\n display: none !important;\n}\n\n/* Header */\n.ui.secondary.menu .header.item {\n border-radius: 0em;\n border-right: @secondaryHeaderBorder;\n background: @secondaryHeaderBackground;\n}\n\n/* Image */\n.ui.secondary.menu .item > img:not(.ui) {\n margin: 0em;\n}\n\n/* Hover */\n.ui.secondary.menu .dropdown.item:hover,\n.ui.secondary.menu .link.item:hover,\n.ui.secondary.menu a.item:hover {\n background: @secondaryHoverItemBackground;\n color: @secondaryHoverItemColor;\n}\n\n/* Active */\n.ui.secondary.menu .active.item {\n box-shadow: none;\n background: @secondaryActiveItemBackground;\n color: @secondaryActiveItemColor;\n border-radius: @secondaryItemBorderRadius;\n}\n\n/* Active Hover */\n.ui.secondary.menu .active.item:hover {\n box-shadow: none;\n background: @secondaryActiveHoverItemBackground;\n color: @secondaryActiveHoverItemColor;\n}\n\n\n/* Inverted */\n.ui.secondary.inverted.menu .link.item,\n.ui.secondary.inverted.menu a.item {\n color: @secondaryInvertedColor !important;\n}\n.ui.secondary.inverted.menu .dropdown.item:hover,\n.ui.secondary.inverted.menu .link.item:hover,\n.ui.secondary.inverted.menu a.item:hover {\n background: @secondaryInvertedHoverBackground;\n color: @secondaryInvertedHoverColor !important;\n}\n.ui.secondary.inverted.menu .active.item {\n background: @secondaryInvertedActiveBackground;\n color: @secondaryInvertedActiveColor !important;\n}\n\n/* Fix item margins */\n.ui.secondary.item.menu {\n margin-left: 0em;\n margin-right: 0em;\n}\n.ui.secondary.item.menu .item:last-child {\n margin-right: 0em;\n}\n.ui.secondary.attached.menu {\n box-shadow: none;\n}\n\n/* Sub Menu */\n.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {\n margin: @secondaryMenuSubMenuMargin;\n}\n.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {\n margin: @secondaryMenuSubMenuItemMargin;\n padding: @secondaryMenuSubMenuItemPadding;\n}\n\n\n/*---------------------\n Secondary Vertical\n-----------------------*/\n\n.ui.secondary.vertical.menu > .item {\n border: none;\n margin: @secondaryVerticalItemMargin;\n border-radius: @secondaryVerticalItemBorderRadius !important;\n}\n.ui.secondary.vertical.menu > .header.item {\n border-radius: 0em;\n}\n\n/* Sub Menu */\n.ui.vertical.secondary.menu .item > .menu .item {\n background-color: transparent;\n}\n\n/* Inverted */\n.ui.secondary.inverted.menu {\n background-color: transparent;\n}\n\n/*---------------------\n Secondary Pointing\n-----------------------*/\n\n.ui.secondary.pointing.menu {\n margin-left: 0em;\n margin-right: 0em;\n border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor;\n}\n\n.ui.secondary.pointing.menu .item {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n border-radius: 0em;\n align-self: flex-end;\n\n margin: 0em 0em -@secondaryPointingBorderWidth;\n padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding;\n border-bottom-width: @secondaryPointingBorderWidth;\n transition: @secondaryItemTransition;\n}\n\n/* Item Types */\n.ui.secondary.pointing.menu .header.item {\n color: @secondaryPointingHeaderColor !important;\n}\n.ui.secondary.pointing.menu .text.item {\n box-shadow: none !important;\n}\n.ui.secondary.pointing.menu .item:after {\n display: none;\n}\n\n/* Hover */\n.ui.secondary.pointing.menu .dropdown.item:hover,\n.ui.secondary.pointing.menu .link.item:hover,\n.ui.secondary.pointing.menu a.item:hover {\n background-color: transparent;\n color: @secondaryPointingHoverTextColor;\n}\n\n/* Pressed */\n.ui.secondary.pointing.menu .dropdown.item:active,\n.ui.secondary.pointing.menu .link.item:active,\n.ui.secondary.pointing.menu a.item:active {\n background-color: transparent;\n border-color: @secondaryPointingBorderColor;\n}\n\n/* Active */\n.ui.secondary.pointing.menu .active.item {\n background-color: transparent;\n box-shadow: none;\n border-color: @secondaryPointingActiveBorderColor;\n font-weight: @secondaryPointingActiveFontWeight;\n color: @secondaryPointingActiveTextColor;\n}\n\n/* Active Hover */\n.ui.secondary.pointing.menu .active.item:hover {\n border-color: @secondaryPointingActiveHoverBorderColor;\n color: @secondaryPointingActiveHoverTextColor;\n}\n\n/* Active Dropdown */\n.ui.secondary.pointing.menu .active.dropdown.item {\n border-color: @secondaryPointingActiveDropdownBorderColor;\n}\n\n/* Vertical Pointing */\n.ui.secondary.vertical.pointing.menu {\n border-bottom-width: 0px;\n border-right-width: @secondaryPointingBorderWidth;\n border-right-style: solid;\n border-right-color: @secondaryPointingBorderColor;\n}\n.ui.secondary.vertical.pointing.menu .item {\n border-bottom: none;\n border-right-style: solid;\n border-right-color: transparent;\n border-radius: 0em !important;\n margin: @secondaryVerticalPointingItemMargin;\n border-right-width: @secondaryPointingBorderWidth;\n}\n\n/* Vertical Active */\n.ui.secondary.vertical.pointing.menu .active.item {\n border-color: @secondaryPointingActiveBorderColor;\n}\n\n/* Inverted */\n.ui.secondary.inverted.pointing.menu {\n border-color: @secondaryPointingInvertedBorderColor;\n}\n\n.ui.secondary.inverted.pointing.menu {\n border-width: @secondaryPointingBorderWidth;\n border-color: @secondaryPointingBorderColor;\n}\n.ui.secondary.inverted.pointing.menu .item {\n color: @secondaryPointingInvertedItemTextColor;\n}\n.ui.secondary.inverted.pointing.menu .header.item {\n color: @secondaryPointingInvertedItemHeaderColor !important;\n}\n\n/* Hover */\n.ui.secondary.inverted.pointing.menu .link.item:hover,\n.ui.secondary.inverted.pointing.menu a.item:hover {\n color: @secondaryPointingInvertedItemHoverTextColor;\n}\n\n\n/* Active */\n.ui.secondary.inverted.pointing.menu .active.item {\n border-color: @secondaryPointingInvertedActiveBorderColor;\n color: @secondaryPointingInvertedActiveColor;\n}\n\n/*--------------\n Text Menu\n---------------*/\n\n.ui.text.menu {\n background: none transparent;\n border-radius: 0px;\n box-shadow: none;\n border: none;\n\n margin: @textMenuMargin;\n}\n.ui.text.menu .item {\n border-radius: 0px;\n box-shadow: none;\n align-self: center;\n margin: @textMenuItemMargin;\n padding: @textMenuItemPadding;\n font-weight: @textMenuItemFontWeight;\n color: @textMenuItemColor;\n transition: @textMenuItemTransition;\n}\n\n/* Border */\n.ui.text.menu .item:before,\n.ui.text.menu .menu .item:before {\n display: none !important;\n}\n\n/* Header */\n.ui.text.menu .header.item {\n background-color: transparent;\n opacity: 1;\n color: @textMenuHeaderColor;\n font-size: @textMenuHeaderSize;\n text-transform: @textMenuHeaderTextTransform;\n font-weight: @textMenuHeaderFontWeight;\n}\n\n/* Image */\n.ui.text.menu .item > img:not(.ui) {\n margin: 0em;\n}\n\n/*--- fluid text ---*/\n.ui.text.item.menu .item {\n margin: 0em;\n}\n\n/*--- vertical text ---*/\n.ui.vertical.text.menu {\n margin: @textVerticalMenuMargin;\n}\n.ui.vertical.text.menu:first-child {\n margin-top: 0rem;\n}\n.ui.vertical.text.menu:last-child {\n margin-bottom: 0rem;\n}\n.ui.vertical.text.menu .item {\n margin: @textVerticalMenuItemMargin;\n padding-left: 0em;\n padding-right: 0em;\n}\n.ui.vertical.text.menu .item > i.icon {\n float: @textVerticalMenuIconFloat;\n margin: @iconMargin;\n}\n.ui.vertical.text.menu .header.item {\n margin: @textVerticalMenuHeaderMargin;\n}\n\n/* Vertical Sub Menu */\n.ui.vertical.text.menu .item:not(.dropdown) > .menu {\n margin: @textMenuSubMenuMargin;\n}\n.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {\n margin: @textMenuSubMenuItemMargin;\n padding: @textMenuSubMenuItemPadding;\n}\n\n/*--- hover ---*/\n.ui.text.menu .item:hover {\n opacity: 1;\n background-color: transparent;\n}\n\n/*--- active ---*/\n.ui.text.menu .active.item {\n background-color: transparent;\n border: none;\n box-shadow: none;\n font-weight: @textMenuActiveItemFontWeight;\n color: @textMenuActiveItemColor;\n}\n\n/*--- active hover ---*/\n.ui.text.menu .active.item:hover {\n background-color: transparent;\n}\n\n/* Disable Bariations */\n.ui.text.pointing.menu .active.item:after {\n box-shadow: none;\n}\n.ui.text.attached.menu {\n box-shadow: none;\n}\n\n/* Inverted */\n.ui.inverted.text.menu,\n.ui.inverted.text.menu .item,\n.ui.inverted.text.menu .item:hover,\n.ui.inverted.text.menu .active.item {\n background-color: transparent !important;\n}\n\n/* Fluid */\n.ui.fluid.text.menu {\n margin-left: 0em;\n margin-right: 0em;\n}\n\n/*--------------\n Icon Only\n---------------*/\n\n/* Vertical Menu */\n.ui.vertical.icon.menu {\n display: inline-block;\n width: auto;\n}\n\n/* Item */\n.ui.icon.menu .item {\n height: auto;\n text-align: @iconMenuTextAlign;\n color: @iconMenuItemColor;\n}\n\n/* Icon */\n.ui.icon.menu .item > .icon:not(.dropdown) {\n margin: 0;\n opacity: 1;\n}\n\n/* Icon Gylph */\n.ui.icon.menu .icon:before {\n opacity: 1;\n}\n\n/* (x) Item Icon */\n.ui.menu .icon.item > .icon {\n width: auto;\n margin: 0em auto;\n}\n\n/* Vertical Icon */\n.ui.vertical.icon.menu .item > .icon:not(.dropdown) {\n display: block;\n opacity: 1;\n margin: 0em auto;\n float: none;\n}\n\n/* Inverted */\n.ui.inverted.icon.menu .item {\n color: @iconMenuInvertedItemColor;\n}\n\n/*--------------\n Labeled Icon\n---------------*/\n\n/* Menu */\n.ui.labeled.icon.menu {\n text-align: center;\n}\n\n/* Item */\n.ui.labeled.icon.menu .item {\n min-width: @labeledIconMinWidth;\n flex-direction: column;\n}\n\n/* Icon */\n.ui.labeled.icon.menu .item > .icon:not(.dropdown) {\n height: 1em;\n display: block;\n font-size: @labeledIconSize !important;\n margin: 0em auto @labeledIconTextMargin !important;\n}\n\n/* Fluid */\n.ui.fluid.labeled.icon.menu > .item {\n min-width: 0em;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Stackable\n---------------*/\n\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.stackable.menu {\n flex-direction: column;\n }\n .ui.stackable.menu .item {\n width: 100% !important;\n }\n .ui.stackable.menu .item:before {\n position: absolute;\n content: '';\n top: auto;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: @dividerSize;\n background: @verticalDividerBackground;\n }\n\n .ui.stackable.menu .left.menu,\n .ui.stackable.menu .left.item {\n margin-right: 0 !important;\n }\n .ui.stackable.menu .right.menu,\n .ui.stackable.menu .right.item {\n margin-left: 0 !important;\n }\n\n .ui.stackable.menu .right.menu,\n .ui.stackable.menu .left.menu {\n flex-direction: column;\n }\n}\n\n/*--------------\n Colors\n---------------*/\n\n/*--- Standard Colors ---*/\n.ui.menu .red.active.item,\n.ui.red.menu .active.item {\n border-color: @red !important;\n color: @red !important;\n}\n.ui.menu .orange.active.item,\n.ui.orange.menu .active.item {\n border-color: @orange !important;\n color: @orange !important;\n}\n.ui.menu .yellow.active.item,\n.ui.yellow.menu .active.item {\n border-color: @yellow !important;\n color: @yellow !important;\n}\n.ui.menu .olive.active.item,\n.ui.olive.menu .active.item {\n border-color: @olive !important;\n color: @olive !important;\n}\n.ui.menu .green.active.item,\n.ui.green.menu .active.item {\n border-color: @green !important;\n color: @green !important;\n}\n.ui.menu .teal.active.item,\n.ui.teal.menu .active.item {\n border-color: @teal !important;\n color: @teal !important;\n}\n.ui.menu .blue.active.item,\n.ui.blue.menu .active.item {\n border-color: @blue !important;\n color: @blue !important;\n}\n.ui.menu .violet.active.item,\n.ui.violet.menu .active.item {\n border-color: @violet !important;\n color: @violet !important;\n}\n.ui.menu .purple.active.item,\n.ui.purple.menu .active.item {\n border-color: @purple !important;\n color: @purple !important;\n}\n.ui.menu .pink.active.item,\n.ui.pink.menu .active.item {\n border-color: @pink !important;\n color: @pink !important;\n}\n.ui.menu .brown.active.item,\n.ui.brown.menu .active.item {\n border-color: @brown !important;\n color: @brown !important;\n}\n.ui.menu .grey.active.item,\n.ui.grey.menu .active.item {\n border-color: @grey !important;\n color: @grey !important;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n.ui.inverted.menu {\n border: @invertedBorder;\n background: @invertedBackground;\n box-shadow: @invertedBoxShadow;\n}\n\n/* Menu Item */\n.ui.inverted.menu .item,\n.ui.inverted.menu .item > a:not(.ui) {\n background: @invertedItemBackground;\n color: @invertedItemTextColor;\n}\n.ui.inverted.menu .item.menu {\n background: @invertedSubMenuBackground;\n}\n\n/*--- Border ---*/\n.ui.inverted.menu .item:before {\n background: @invertedDividerBackground;\n}\n.ui.vertical.inverted.menu .item:before {\n background: @invertedVerticalDividerBackground;\n}\n\n/* Sub Menu */\n.ui.vertical.inverted.menu .menu .item,\n.ui.vertical.inverted.menu .menu .item a:not(.ui) {\n color: @invertedSubMenuColor;\n}\n\n/* Header */\n.ui.inverted.menu .header.item {\n margin: 0em;\n background: @invertedHeaderBackground;\n box-shadow: none;\n}\n\n/* Disabled */\n.ui.inverted.menu .item.disabled,\n.ui.inverted.menu .item.disabled:hover {\n color: @invertedDisabledTextColor;\n}\n\n/*--- Hover ---*/\n.ui.link.inverted.menu .item:hover,\n.ui.inverted.menu .dropdown.item:hover,\n.ui.inverted.menu .link.item:hover,\n.ui.inverted.menu a.item:hover {\n background: @invertedHoverBackground;\n color: @invertedHoverColor;\n}\n.ui.vertical.inverted.menu .item .menu a.item:hover,\n.ui.vertical.inverted.menu .item .menu .link.item:hover {\n background: @invertedSubMenuBackground;\n color: @invertedSubMenuHoverColor;\n}\n\n/*--- Pressed ---*/\n.ui.inverted.menu a.item:active,\n.ui.inverted.menu .link.item:active{\n background: @invertedMenuPressedBackground;\n color: @invertedMenuPressedColor;\n}\n\n/*--- Active ---*/\n.ui.inverted.menu .active.item {\n background: @invertedActiveBackground;\n color: @invertedActiveColor !important;\n}\n.ui.inverted.vertical.menu .item .menu .active.item {\n background: @invertedSubMenuActiveBackground;\n color: @invertedSubMenuActiveColor;\n}\n.ui.inverted.pointing.menu .active.item:after {\n background: @invertedArrowActiveColor !important;\n margin: 0em !important;\n box-shadow: none !important;\n border: none !important;\n}\n\n/*--- Active Hover ---*/\n.ui.inverted.menu .active.item:hover {\n background: @invertedActiveHoverBackground;\n color: @invertedActiveHoverColor !important;\n}\n.ui.inverted.pointing.menu .active.item:hover:after {\n background: @invertedArrowActiveHoverColor !important;\n}\n\n\n/*--------------\n Floated\n---------------*/\n\n.ui.floated.menu {\n float: left;\n margin: 0rem @floatedDistance 0rem 0rem;\n}\n.ui.floated.menu .item:last-child:before {\n display: none;\n}\n\n.ui.right.floated.menu {\n float: right;\n margin: 0rem 0rem 0rem @floatedDistance;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n/* Red */\n.ui.inverted.menu .red.active.item,\n.ui.inverted.red.menu {\n background-color: @red;\n}\n.ui.inverted.red.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.red.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Orange */\n.ui.inverted.menu .orange.active.item,\n.ui.inverted.orange.menu {\n background-color: @orange;\n}\n.ui.inverted.orange.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.orange.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Yellow */\n.ui.inverted.menu .yellow.active.item,\n.ui.inverted.yellow.menu {\n background-color: @yellow;\n}\n.ui.inverted.yellow.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.yellow.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Olive */\n.ui.inverted.menu .olive.active.item,\n.ui.inverted.olive.menu {\n background-color: @olive;\n}\n.ui.inverted.olive.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.olive.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Green */\n.ui.inverted.menu .green.active.item,\n.ui.inverted.green.menu {\n background-color: @green;\n}\n.ui.inverted.green.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.green.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Teal */\n.ui.inverted.menu .teal.active.item,\n.ui.inverted.teal.menu {\n background-color: @teal;\n}\n.ui.inverted.teal.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.teal.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Blue */\n.ui.inverted.menu .blue.active.item,\n.ui.inverted.blue.menu {\n background-color: @blue;\n}\n.ui.inverted.blue.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.blue.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Violet */\n.ui.inverted.menu .violet.active.item,\n.ui.inverted.violet.menu {\n background-color: @violet;\n}\n.ui.inverted.violet.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.violet.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Purple */\n.ui.inverted.menu .purple.active.item,\n.ui.inverted.purple.menu {\n background-color: @purple;\n}\n.ui.inverted.purple.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.purple.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Pink */\n.ui.inverted.menu .pink.active.item,\n.ui.inverted.pink.menu {\n background-color: @pink;\n}\n.ui.inverted.pink.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.pink.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Brown */\n.ui.inverted.menu .brown.active.item,\n.ui.inverted.brown.menu {\n background-color: @brown;\n}\n.ui.inverted.brown.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.brown.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n/* Grey */\n.ui.inverted.menu .grey.active.item,\n.ui.inverted.grey.menu {\n background-color: @grey;\n}\n.ui.inverted.grey.menu .item:before {\n background-color: @invertedColoredDividerBackground;\n}\n.ui.inverted.grey.menu .active.item {\n background-color: @invertedColoredActiveBackground !important;\n}\n\n\n/*--------------\n Fitted\n---------------*/\n\n.ui.fitted.menu .item,\n.ui.fitted.menu .item .menu .item,\n.ui.menu .fitted.item {\n padding: 0em;\n}\n.ui.horizontally.fitted.menu .item,\n.ui.horizontally.fitted.menu .item .menu .item,\n.ui.menu .horizontally.fitted.item {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.vertically.fitted.menu .item,\n.ui.vertically.fitted.menu .item .menu .item,\n.ui.menu .vertically.fitted.item {\n padding-left: @itemHorizontalPadding;\n padding-right: @itemHorizontalPadding;\n}\n\n/*--------------\n Borderless\n---------------*/\n\n.ui.borderless.menu .item:before,\n.ui.borderless.menu .item .menu .item:before,\n.ui.menu .borderless.item:before {\n background: none !important;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.menu {\n display: inline-flex;\n margin: 0em;\n vertical-align: middle;\n}\n.ui.compact.vertical.menu {\n display: inline-block;\n}\n.ui.compact.menu .item:last-child {\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui.compact.menu .item:last-child:before {\n display: none;\n}\n.ui.compact.vertical.menu {\n width: auto !important;\n}\n.ui.compact.vertical.menu .item:last-child::before {\n display: block;\n}\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.menu.fluid,\n.ui.vertical.menu.fluid {\n width: 100% !important;\n}\n\n\n/*-------------------\n Evenly Sized\n--------------------*/\n\n.ui.item.menu,\n.ui.item.menu .item {\n width: 100%;\n padding-left: 0em !important;\n padding-right: 0em !important;\n margin-left: 0em !important;\n margin-right: 0em !important;\n text-align: center;\n justify-content: center;\n}\n.ui.attached.item.menu {\n margin: 0em @attachedHorizontalOffset !important;\n}\n\n.ui.item.menu .item:last-child:before {\n display: none;\n}\n\n.ui.menu.two.item .item {\n width: 50%;\n}\n.ui.menu.three.item .item {\n width: 33.333%;\n}\n.ui.menu.four.item .item {\n width: 25%;\n}\n.ui.menu.five.item .item {\n width: 20%;\n}\n.ui.menu.six.item .item {\n width: 16.666%;\n}\n.ui.menu.seven.item .item {\n width: 14.285%;\n}\n.ui.menu.eight.item .item {\n width: 12.500%;\n}\n.ui.menu.nine.item .item {\n width: 11.11%;\n}\n.ui.menu.ten.item .item {\n width: 10.0%;\n}\n.ui.menu.eleven.item .item {\n width: 9.09%;\n}\n.ui.menu.twelve.item .item {\n width: 8.333%;\n}\n\n/*--------------\n Fixed\n---------------*/\n\n.ui.menu.fixed {\n position: fixed;\n z-index: 101;\n margin: 0em;\n width: 100%;\n}\n.ui.menu.fixed,\n.ui.menu.fixed .item:first-child,\n.ui.menu.fixed .item:last-child {\n border-radius: 0px !important;\n}\n\n.ui.fixed.menu,\n.ui[class*=\"top fixed\"].menu {\n top: 0px;\n left: 0px;\n right: auto;\n bottom: auto;\n}\n.ui[class*=\"top fixed\"].menu {\n border-top: none;\n border-left: none;\n border-right: none;\n}\n.ui[class*=\"right fixed\"].menu {\n border-top: none;\n border-bottom: none;\n border-right: none;\n top: 0px;\n right: 0px;\n left: auto;\n bottom: auto;\n width: auto;\n height: 100%;\n}\n.ui[class*=\"bottom fixed\"].menu {\n border-bottom: none;\n border-left: none;\n border-right: none;\n bottom: 0px;\n left: 0px;\n top: auto;\n right: auto;\n}\n.ui[class*=\"left fixed\"].menu {\n border-top: none;\n border-bottom: none;\n border-left: none;\n top: 0px;\n left: 0px;\n right: auto;\n bottom: auto;\n width: auto;\n height: 100%;\n}\n\n/* Coupling with Grid */\n.ui.fixed.menu + .ui.grid {\n padding-top: @fixedPrecedingGridMargin;\n}\n\n\n/*-------------------\n Pointing\n--------------------*/\n\n.ui.pointing.menu .item:after {\n visibility: hidden;\n position: absolute;\n content: '';\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n background: none;\n\n margin: (@arrowBorderWidth / 2) 0em 0em;\n width: @arrowSize;\n height: @arrowSize;\n\n border: none;\n border-bottom: @arrowBorder;\n border-right: @arrowBorder;\n\n z-index: @arrowZIndex;\n transition: @arrowTransition;\n}\n.ui.vertical.pointing.menu .item:after {\n position: absolute;\n top: 50%;\n right: 0%;\n bottom: auto;\n left: auto;\n\n transform: translateX(50%) translateY(-50%) rotate(45deg);\n margin: 0em -(@arrowBorderWidth / 2) 0em 0em;\n\n border: none;\n border-top: @arrowBorder;\n border-right: @arrowBorder;\n}\n\n/* Active */\n.ui.pointing.menu .active.item:after {\n visibility: visible;\n}\n.ui.pointing.menu .active.dropdown.item:after {\n visibility: hidden;\n}\n\n/* Don't double up pointers */\n.ui.pointing.menu .dropdown.active.item:after,\n.ui.pointing.menu .active.item .menu .active.item:after {\n display: none;\n}\n\n/* Colors */\n.ui.pointing.menu .active.item:hover:after {\n background-color: @arrowHoverColor;\n}\n.ui.pointing.menu .active.item:after {\n background-color: @arrowActiveColor;\n}\n.ui.pointing.menu .active.item:hover:after {\n background-color: @arrowActiveHoverColor;\n}\n\n.ui.vertical.pointing.menu .active.item:hover:after {\n background-color: @arrowVerticalHoverColor;\n}\n.ui.vertical.pointing.menu .active.item:after {\n background-color: @arrowVerticalActiveColor;\n}\n.ui.vertical.pointing.menu .menu .active.item:after {\n background-color: @arrowVerticalSubMenuColor;\n}\n\n\n\n/*--------------\n Attached\n---------------*/\n\n/* Middle */\n.ui.attached.menu {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n}\n.ui.attached + .ui.attached.menu:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].menu {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.menu[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui[class*=\"bottom attached\"].menu {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].menu:last-child {\n margin-bottom: 0em;\n}\n\n/* Attached Menu Item */\n.ui.top.attached.menu > .item:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui.bottom.attached.menu > .item:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n\n/* Tabular Attached */\n.ui.attached.menu:not(.tabular) {\n border: @attachedBorder;\n}\n.ui.attached.inverted.menu {\n border: none;\n}\n.ui.attached.tabular.menu {\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n/* Mini */\n.ui.mini.menu {\n font-size: @mini;\n}\n.ui.mini.vertical.menu {\n width: @miniWidth;\n}\n\n/* Tiny */\n.ui.tiny.menu {\n font-size: @tiny;\n}\n.ui.tiny.vertical.menu {\n width: @tinyWidth;\n}\n\n/* Small */\n.ui.small.menu {\n font-size: @small;\n}\n.ui.small.vertical.menu {\n width: @smallWidth;\n}\n\n/* Medium */\n.ui.menu {\n font-size: @medium;\n}\n.ui.vertical.menu {\n width: @mediumWidth;\n}\n\n/* Large */\n.ui.large.menu {\n font-size: @large;\n}\n.ui.large.vertical.menu {\n width: @largeWidth;\n}\n\n/* Huge */\n.ui.huge.menu {\n font-size: @huge;\n}\n.ui.huge.vertical.menu {\n width: @hugeWidth;\n}\n\n/* Big */\n.ui.big.menu {\n font-size: @big;\n}\n.ui.big.vertical.menu {\n width: @bigWidth;\n}\n\n/* Massive */\n.ui.massive.menu {\n font-size: @massive;\n}\n.ui.massive.vertical.menu {\n width: @massiveWidth;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/collections/message.less", "content": "/*!\n * # Semantic UI - Message\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'message';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Message\n*******************************/\n\n.ui.message {\n position: relative;\n min-height: 1em;\n margin: @verticalMargin 0em;\n background: @background;\n padding: @padding;\n line-height: @lineHeight;\n color: @textColor;\n transition: @transition;\n border-radius: @borderRadius;\n box-shadow: @boxShadow;\n}\n\n.ui.message:first-child {\n margin-top: 0em;\n}\n.ui.message:last-child {\n margin-bottom: 0em;\n}\n\n\n/*--------------\n Content\n---------------*/\n\n/* Header */\n.ui.message .header {\n display: @headerDisplay;\n font-family: @headerFont;\n font-weight: @headerFontWeight;\n margin: @headerMargin;\n}\n\n/* Default font size */\n.ui.message .header:not(.ui) {\n font-size: @headerFontSize;\n}\n\n/* Paragraph */\n.ui.message p {\n opacity: @messageTextOpacity;\n margin: @messageParagraphMargin 0em;\n}\n.ui.message p:first-child {\n margin-top: 0em;\n}\n.ui.message p:last-child {\n margin-bottom: 0em;\n}\n.ui.message .header + p {\n margin-top: @headerParagraphDistance;\n}\n\n/* List */\n.ui.message .list:not(.ui) {\n text-align: left;\n padding: 0em;\n opacity: @listOpacity;\n list-style-position: @listStylePosition;\n margin: @listMargin 0em 0em;\n}\n.ui.message .list:not(.ui):first-child {\n margin-top: 0em;\n}\n.ui.message .list:not(.ui):last-child {\n margin-bottom: 0em;\n}\n.ui.message .list:not(.ui) li {\n position: relative;\n list-style-type: none;\n margin: 0em 0em @listItemMargin @listItemIndent;\n padding: 0em;\n}\n.ui.message .list:not(.ui) li:before {\n position: absolute;\n content: '•';\n left: -1em;\n height: 100%;\n vertical-align: baseline;\n}\n.ui.message .list:not(.ui) li:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Icon */\n.ui.message > .icon {\n margin-right: @iconDistance;\n}\n\n/* Close Icon */\n.ui.message > .close.icon {\n cursor: pointer;\n position: absolute;\n margin: 0em;\n top: @closeTopDistance;\n right: @closeRightDistance;\n opacity: @closeOpacity;\n transition: @closeTransition;\n}\n.ui.message > .close.icon:hover {\n opacity: 1;\n}\n\n/* First / Last Element */\n.ui.message > :first-child {\n margin-top: 0em;\n}\n.ui.message > :last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.dropdown .menu > .message {\n margin: 0px -@borderWidth;\n}\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Visible\n---------------*/\n\n.ui.visible.visible.visible.visible.message {\n display: block;\n}\n\n.ui.icon.visible.visible.visible.visible.message {\n display: flex;\n}\n\n/*--------------\n Hidden\n---------------*/\n\n.ui.hidden.hidden.hidden.hidden.message {\n display: none;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Compact\n---------------*/\n\n.ui.compact.message {\n display: inline-block;\n}\n.ui.compact.icon.message {\n display: inline-flex;\n}\n\n\n/*--------------\n Attached\n---------------*/\n\n.ui.attached.message {\n margin-bottom: @attachedYOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n box-shadow: @attachedBoxShadow;\n margin-left: @attachedXOffset;\n margin-right: @attachedXOffset;\n}\n.ui.attached + .ui.attached.message:not(.top):not(.bottom) {\n margin-top: @attachedYOffset;\n border-radius: 0em;\n}\n.ui.bottom.attached.message {\n margin-top: @attachedYOffset;\n border-radius: 0em 0em @borderRadius @borderRadius;\n box-shadow: @attachedBottomBoxShadow;\n}\n.ui.bottom.attached.message:not(:last-child) {\n margin-bottom: @verticalMargin;\n}\n.ui.attached.icon.message {\n width: auto;\n}\n\n\n/*--------------\n Icon\n---------------*/\n\n.ui.icon.message {\n display: flex;\n width: 100%;\n align-items: center;\n}\n.ui.icon.message > .icon:not(.close) {\n display: block;\n flex: 0 0 auto;\n width: auto;\n line-height: 1;\n vertical-align: @iconVerticalAlign;\n font-size: @iconSize;\n opacity: @iconOpacity;\n}\n.ui.icon.message > .content {\n display: block;\n flex: 1 1 auto;\n vertical-align: @iconVerticalAlign;\n}\n\n\n.ui.icon.message .icon:not(.close) + .content {\n padding-left: @iconContentDistance;\n}\n.ui.icon.message .circular.icon {\n width: 1em;\n}\n\n/*--------------\n Floating\n---------------*/\n\n.ui.floating.message {\n box-shadow: @floatingBoxShadow;\n}\n\n\n/*--------------\n Colors\n---------------*/\n\n.ui.black.message {\n background-color: @black;\n color: @invertedTextColor;\n}\n\n/*--------------\n Types\n---------------*/\n\n/* Positive */\n.ui.positive.message {\n background-color: @positiveBackgroundColor;\n color: @positiveTextColor;\n}\n.ui.positive.message,\n.ui.attached.positive.message {\n box-shadow: @positiveBoxShadow;\n}\n.ui.positive.message .header {\n color: @positiveHeaderColor;\n}\n\n/* Negative */\n.ui.negative.message {\n background-color: @negativeBackgroundColor;\n color: @negativeTextColor;\n}\n.ui.negative.message,\n.ui.attached.negative.message {\n box-shadow: @negativeBoxShadow;\n}\n.ui.negative.message .header {\n color: @negativeHeaderColor;\n}\n\n/* Info */\n.ui.info.message {\n background-color: @infoBackgroundColor;\n color: @infoTextColor;\n}\n.ui.info.message,\n.ui.attached.info.message {\n box-shadow: @infoBoxShadow;\n}\n.ui.info.message .header {\n color: @infoHeaderColor;\n}\n\n/* Warning */\n.ui.warning.message {\n background-color: @warningBackgroundColor;\n color: @warningTextColor;\n}\n.ui.warning.message,\n.ui.attached.warning.message {\n box-shadow: @warningBoxShadow;\n}\n.ui.warning.message .header {\n color: @warningHeaderColor;\n}\n\n/* Error */\n.ui.error.message {\n background-color: @errorBackgroundColor;\n color: @errorTextColor;\n}\n.ui.error.message,\n.ui.attached.error.message {\n box-shadow: @errorBoxShadow;\n}\n.ui.error.message .header {\n color: @errorHeaderColor;\n}\n\n/* Success */\n.ui.success.message {\n background-color: @successBackgroundColor;\n color: @successTextColor;\n}\n.ui.success.message,\n.ui.attached.success.message {\n box-shadow: @successBoxShadow;\n}\n.ui.success.message .header {\n color: @successHeaderColor;\n}\n\n\n/* Colors */\n.ui.inverted.message,\n.ui.black.message {\n background-color: @black;\n color: @invertedTextColor;\n}\n\n.ui.red.message {\n background-color: @redBackground;\n color: @redTextColor;\n box-shadow: @redBoxShadow;\n}\n.ui.red.message .header {\n color: @redHeaderColor;\n}\n\n.ui.orange.message {\n background-color: @orangeBackground;\n color: @orangeTextColor;\n box-shadow: @orangeBoxShadow;\n}\n.ui.orange.message .header {\n color: @orangeHeaderColor;\n}\n\n.ui.yellow.message {\n background-color: @yellowBackground;\n color: @yellowTextColor;\n box-shadow: @yellowBoxShadow;\n}\n.ui.yellow.message .header {\n color: @yellowHeaderColor;\n}\n\n.ui.olive.message {\n background-color: @oliveBackground;\n color: @oliveTextColor;\n box-shadow: @oliveBoxShadow;\n}\n.ui.olive.message .header {\n color: @oliveHeaderColor;\n}\n\n.ui.green.message {\n background-color: @greenBackground;\n color: @greenTextColor;\n box-shadow: @greenBoxShadow;\n}\n.ui.green.message .header {\n color: @greenHeaderColor;\n}\n\n.ui.teal.message {\n background-color: @tealBackground;\n color: @tealTextColor;\n box-shadow: @tealBoxShadow;\n}\n.ui.teal.message .header {\n color: @tealHeaderColor;\n}\n\n.ui.blue.message {\n background-color: @blueBackground;\n color: @blueTextColor;\n box-shadow: @blueBoxShadow;\n}\n.ui.blue.message .header {\n color: @blueHeaderColor;\n}\n\n.ui.violet.message {\n background-color: @violetBackground;\n color: @violetTextColor;\n box-shadow: @violetBoxShadow;\n}\n.ui.violet.message .header {\n color: @violetHeaderColor;\n}\n\n.ui.purple.message {\n background-color: @purpleBackground;\n color: @purpleTextColor;\n box-shadow: @purpleBoxShadow;\n}\n.ui.purple.message .header {\n color: @purpleHeaderColor;\n}\n\n.ui.pink.message {\n background-color: @pinkBackground;\n color: @pinkTextColor;\n box-shadow: @pinkBoxShadow;\n}\n.ui.pink.message .header {\n color: @pinkHeaderColor;\n}\n\n.ui.brown.message {\n background-color: @brownBackground;\n color: @brownTextColor;\n box-shadow: @brownBoxShadow;\n}\n.ui.brown.message .header {\n color: @brownHeaderColor;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.mini.message {\n font-size: @relativeMini;\n}\n.ui.tiny.message {\n font-size: @relativeTiny;\n}\n.ui.small.message {\n font-size: @relativeSmall;\n}\n.ui.message {\n font-size: @relativeMedium;\n}\n.ui.large.message {\n font-size: @relativeLarge;\n}\n.ui.big.message {\n font-size: @relativeBig;\n}\n.ui.huge.message {\n font-size: @relativeHuge;\n}\n.ui.massive.message {\n font-size: @relativeMassive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/collections/table.less", "content": "/*!\n * # Semantic UI - Table\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'collection';\n@element : 'table';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Table\n*******************************/\n\n/* Prototype */\n.ui.table {\n width: 100%;\n background: @background;\n margin: @margin;\n border: @border;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n text-align: @textAlign;\n color: @color;\n border-collapse: @borderCollapse;\n border-spacing: @borderSpacing;\n}\n\n.ui.table:first-child {\n margin-top: 0em;\n}\n.ui.table:last-child {\n margin-bottom: 0em;\n}\n\n/*******************************\n Parts\n*******************************/\n\n/* Table Content */\n.ui.table th,\n.ui.table td {\n transition: @transition;\n}\n\n/* Headers */\n.ui.table thead {\n box-shadow: @headerBoxShadow;\n}\n.ui.table thead th {\n cursor: auto;\n background: @headerBackground;\n text-align: @headerAlign;\n color: @headerColor;\n padding: @headerVerticalPadding @headerHorizontalPadding;\n vertical-align: @headerVerticalAlign;\n font-style: @headerFontStyle;\n font-weight: @headerFontWeight;\n text-transform: @headerTextTransform;\n border-bottom: @headerBorder;\n border-left: @headerDivider;\n}\n\n.ui.table thead tr > th:first-child {\n border-left: none;\n}\n\n.ui.table thead tr:first-child > th:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui.table thead tr:first-child > th:last-child {\n border-radius: 0em @borderRadius 0em 0em;\n}\n.ui.table thead tr:first-child > th:only-child {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n\n/* Footer */\n.ui.table tfoot {\n box-shadow: @footerBoxShadow;\n}\n.ui.table tfoot th {\n cursor: auto;\n border-top: @footerBorder;\n background: @footerBackground;\n text-align: @footerAlign;\n color: @footerColor;\n padding: @footerVerticalPadding @footerHorizontalPadding;\n vertical-align: @footerVerticalAlign;\n font-style: @footerFontStyle;\n font-weight: @footerFontWeight;\n text-transform: @footerTextTransform;\n}\n.ui.table tfoot tr > th:first-child {\n border-left: none;\n}\n.ui.table tfoot tr:first-child > th:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n.ui.table tfoot tr:first-child > th:last-child {\n border-radius: 0em 0em @borderRadius 0em;\n}\n.ui.table tfoot tr:first-child > th:only-child {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Table Row */\n.ui.table tr td {\n border-top: @rowBorder;\n}\n.ui.table tr:first-child td {\n border-top: none;\n}\n\n/* Repeated tbody */\n.ui.table tbody + tbody tr:first-child td {\n border-top: @rowBorder;\n}\n\n/* Table Cells */\n.ui.table td {\n padding: @cellVerticalPadding @cellHorizontalPadding;\n text-align: @cellTextAlign;\n}\n\n/* Icons */\n.ui.table > .icon {\n vertical-align: @iconVerticalAlign;\n}\n.ui.table > .icon:only-child {\n margin: 0em;\n}\n\n/* Table Segment */\n.ui.table.segment {\n padding: 0em;\n}\n.ui.table.segment:after {\n display: none;\n}\n.ui.table.segment.stacked:after {\n display: block;\n}\n\n\n/* Responsive */\n@media only screen and (max-width : @largestMobileScreen) {\n .ui.table:not(.unstackable) {\n width: 100%;\n }\n .ui.table:not(.unstackable) tbody,\n .ui.table:not(.unstackable) tr,\n .ui.table:not(.unstackable) tr > th,\n .ui.table:not(.unstackable) tr > td {\n display: block !important;\n width: auto !important;\n display: block !important;\n }\n\n .ui.table:not(.unstackable) {\n padding: 0em;\n }\n .ui.table:not(.unstackable) thead {\n display: @responsiveHeaderDisplay;\n }\n .ui.table:not(.unstackable) tfoot {\n display: @responsiveFooterDisplay;\n }\n .ui.table:not(.unstackable) tr {\n padding-top: @responsiveRowVerticalPadding;\n padding-bottom: @responsiveRowVerticalPadding;\n box-shadow: @responsiveRowBoxShadow;\n }\n\n .ui.table:not(.unstackable) tr > th,\n .ui.table:not(.unstackable) tr > td {\n background: none;\n border: none !important;\n padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;\n box-shadow: @responsiveCellBoxShadow;\n }\n .ui.table:not(.unstackable) th:first-child,\n .ui.table:not(.unstackable) td:first-child {\n font-weight: @responsiveCellHeaderFontWeight;\n }\n\n /* Definition Table */\n .ui.definition.table:not(.unstackable) thead th:first-child {\n box-shadow: none !important;\n }\n}\n\n\n/*******************************\n Coupling\n*******************************/\n\n/* UI Image */\n.ui.table th .image,\n.ui.table th .image img,\n.ui.table td .image,\n.ui.table td .image img {\n max-width: none;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Complex\n---------------*/\n\n.ui.structured.table {\n border-collapse: collapse;\n}\n.ui.structured.table thead th {\n border-left: @headerDivider;\n border-right: @headerDivider;\n}\n.ui.structured.sortable.table thead th {\n border-left: @sortableBorder;\n border-right: @sortableBorder;\n}\n.ui.structured.basic.table th {\n border-left: @basicTableHeaderDivider;\n border-right: @basicTableHeaderDivider;\n}\n.ui.structured.celled.table tr th,\n.ui.structured.celled.table tr td {\n border-left: @cellBorder;\n border-right: @cellBorder;\n}\n\n/*--------------\n Definition\n---------------*/\n\n.ui.definition.table thead:not(.full-width) th:first-child {\n pointer-events: none;\n background: @definitionHeaderBackground;\n font-weight: @definitionHeaderFontWeight;\n color: @definitionHeaderColor;\n box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n.ui.definition.table tfoot:not(.full-width) th:first-child {\n pointer-events: none;\n background: @definitionFooterBackground;\n font-weight: @definitionFooterColor;\n color: @definitionFooterFontWeight;\n box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n/* Remove Border */\n.ui.celled.definition.table thead:not(.full-width) th:first-child {\n box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground;\n}\n.ui.celled.definition.table tfoot:not(.full-width) th:first-child {\n box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground;\n}\n\n/* Highlight Defining Column */\n.ui.definition.table tr td:first-child:not(.ignored),\n.ui.definition.table tr td.definition {\n background: @definitionColumnBackground;\n font-weight: @definitionColumnFontWeight;\n color: @definitionColumnColor;\n text-transform: @definitionColumnTextTransform;\n box-shadow: @definitionColumnBoxShadow;\n text-align: @definitionColumnTextAlign;\n font-size: @definitionColumnFontSize;\n padding-left: @definitionColumnHorizontalPadding;\n padding-right: @definitionColumnHorizontalPadding;\n}\n\n\n/* Fix 2nd Column */\n.ui.definition.table thead:not(.full-width) th:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n.ui.definition.table tfoot:not(.full-width) th:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n.ui.definition.table td:nth-child(2) {\n border-left: @borderWidth solid @borderColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Positive\n---------------*/\n\n.ui.table tr.positive,\n.ui.table td.positive {\n box-shadow: @positiveBoxShadow;\n}\n.ui.table tr.positive,\n.ui.table td.positive {\n background: @positiveBackgroundColor !important;\n color: @positiveColor !important;\n}\n\n/*--------------\n Negative\n---------------*/\n\n.ui.table tr.negative,\n.ui.table td.negative {\n box-shadow: @negativeBoxShadow;\n}\n.ui.table tr.negative,\n.ui.table td.negative {\n background: @negativeBackgroundColor !important;\n color: @negativeColor !important;\n}\n\n/*--------------\n Error\n---------------*/\n\n.ui.table tr.error,\n.ui.table td.error {\n box-shadow: @errorBoxShadow;\n}\n.ui.table tr.error,\n.ui.table td.error {\n background: @errorBackgroundColor !important;\n color: @errorColor !important;\n}\n/*--------------\n Warning\n---------------*/\n\n.ui.table tr.warning,\n.ui.table td.warning {\n box-shadow: @warningBoxShadow;\n}\n.ui.table tr.warning,\n.ui.table td.warning {\n background: @warningBackgroundColor !important;\n color: @warningColor !important;\n}\n\n/*--------------\n Active\n---------------*/\n\n.ui.table tr.active,\n.ui.table td.active {\n box-shadow: @activeBoxShadow;\n}\n.ui.table tr.active,\n.ui.table td.active {\n background: @activeBackgroundColor !important;\n color: @activeColor !important;\n}\n\n\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.table tr.disabled td,\n.ui.table tr td.disabled,\n.ui.table tr.disabled:hover,\n.ui.table tr:hover td.disabled {\n pointer-events: none;\n color: @disabledTextColor;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Stackable\n---------------*/\n\n@media only screen and (max-width : @largestTabletScreen) {\n\n .ui[class*=\"tablet stackable\"].table,\n .ui[class*=\"tablet stackable\"].table tbody,\n .ui[class*=\"tablet stackable\"].table tr,\n .ui[class*=\"tablet stackable\"].table tr > th,\n .ui[class*=\"tablet stackable\"].table tr > td {\n display: block !important;\n width: 100% !important;\n display: block !important;\n }\n\n .ui[class*=\"tablet stackable\"].table {\n padding: 0em;\n }\n .ui[class*=\"tablet stackable\"].table thead {\n display: @responsiveHeaderDisplay;\n }\n .ui[class*=\"tablet stackable\"].table tfoot {\n display: @responsiveFooterDisplay;\n }\n .ui[class*=\"tablet stackable\"].table tr {\n padding-top: @responsiveRowVerticalPadding;\n padding-bottom: @responsiveRowVerticalPadding;\n box-shadow: @responsiveRowBoxShadow;\n }\n .ui[class*=\"tablet stackable\"].table tr > th,\n .ui[class*=\"tablet stackable\"].table tr > td {\n background: none;\n border: none !important;\n padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;\n box-shadow: @responsiveCellBoxShadow;\n }\n\n /* Definition Table */\n .ui.definition[class*=\"tablet stackable\"].table thead th:first-child {\n box-shadow: none !important;\n }\n}\n\n/*--------------\n Text Alignment\n---------------*/\n\n.ui.table[class*=\"left aligned\"],\n.ui.table [class*=\"left aligned\"] {\n text-align: left;\n}\n.ui.table[class*=\"center aligned\"],\n.ui.table [class*=\"center aligned\"] {\n text-align: center;\n}\n.ui.table[class*=\"right aligned\"],\n.ui.table [class*=\"right aligned\"] {\n text-align: right;\n}\n\n/*------------------\n Vertical Alignment\n------------------*/\n\n.ui.table[class*=\"top aligned\"],\n.ui.table [class*=\"top aligned\"] {\n vertical-align: top;\n}\n.ui.table[class*=\"middle aligned\"],\n.ui.table [class*=\"middle aligned\"] {\n vertical-align: middle;\n}\n.ui.table[class*=\"bottom aligned\"],\n.ui.table [class*=\"bottom aligned\"] {\n vertical-align: bottom;\n}\n\n/*--------------\n Collapsing\n---------------*/\n\n.ui.table th.collapsing,\n.ui.table td.collapsing {\n width: 1px;\n white-space: nowrap;\n}\n\n/*--------------\n Fixed\n---------------*/\n\n.ui.fixed.table {\n table-layout: fixed;\n}\n\n.ui.fixed.table th,\n.ui.fixed.table td {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n/*--------------\n Selectable\n---------------*/\n\n.ui.selectable.table tbody tr:hover,\n.ui.table tbody tr td.selectable:hover {\n background: @selectableBackground !important;\n color: @selectableTextColor !important;\n}\n.ui.selectable.inverted.table tbody tr:hover,\n.ui.inverted.table tbody tr td.selectable:hover {\n background: @selectableInvertedBackground !important;\n color: @selectableInvertedTextColor !important;\n}\n\n/* Selectable Cell Link */\n.ui.table tbody tr td.selectable {\n padding: 0em;\n}\n.ui.table tbody tr td.selectable > a:not(.ui) {\n display: block;\n color: inherit;\n padding: @cellVerticalPadding @cellHorizontalPadding;\n}\n\n/* Other States */\n.ui.selectable.table tr.error:hover,\n.ui.table tr td.selectable.error:hover,\n.ui.selectable.table tr:hover td.error {\n background: @errorBackgroundHover !important;\n color: @errorColorHover !important;\n}\n.ui.selectable.table tr.warning:hover,\n.ui.table tr td.selectable.warning:hover,\n.ui.selectable.table tr:hover td.warning {\n background: @warningBackgroundHover !important;\n color: @warningColorHover !important;\n}\n.ui.selectable.table tr.active:hover,\n.ui.table tr td.selectable.active:hover,\n.ui.selectable.table tr:hover td.active {\n background: @activeBackgroundColor !important;\n color: @activeColor !important;\n}\n.ui.selectable.table tr.positive:hover,\n.ui.table tr td.selectable.positive:hover,\n.ui.selectable.table tr:hover td.positive {\n background: @positiveBackgroundHover !important;\n color: @positiveColorHover !important;\n}\n.ui.selectable.table tr.negative:hover,\n.ui.table tr td.selectable.negative:hover,\n.ui.selectable.table tr:hover td.negative {\n background: @negativeBackgroundHover !important;\n color: @negativeColorHover !important;\n}\n\n\n\n/*-------------------\n Attached\n--------------------*/\n\n/* Middle */\n.ui.attached.table {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached + .ui.attached.table:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].table {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.table[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui[class*=\"bottom attached\"].table {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].table:last-child {\n margin-bottom: 0em;\n}\n\n/*--------------\n Striped\n---------------*/\n\n/* Table Striping */\n.ui.striped.table > tr:nth-child(2n),\n.ui.striped.table tbody tr:nth-child(2n) {\n background-color: @stripedBackground;\n}\n\n/* Stripes */\n.ui.inverted.striped.table > tr:nth-child(2n),\n.ui.inverted.striped.table tbody tr:nth-child(2n) {\n background-color: @invertedStripedBackground;\n}\n\n/* Allow striped active hover */\n.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover {\n background: @activeBackgroundHover !important;\n color: @activeColorHover !important;\n}\n\n/*--------------\n Single Line\n---------------*/\n\n.ui.table[class*=\"single line\"],\n.ui.table [class*=\"single line\"] {\n white-space: nowrap;\n}\n.ui.table[class*=\"single line\"],\n.ui.table [class*=\"single line\"] {\n white-space: nowrap;\n}\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\n.ui.red.table {\n border-top: @coloredBorderSize solid @red;\n}\n.ui.inverted.red.table {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\n.ui.orange.table {\n border-top: @coloredBorderSize solid @orange;\n}\n.ui.inverted.orange.table {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\n.ui.yellow.table {\n border-top: @coloredBorderSize solid @yellow;\n}\n.ui.inverted.yellow.table {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\n.ui.olive.table {\n border-top: @coloredBorderSize solid @olive;\n}\n.ui.inverted.olive.table {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\n.ui.green.table {\n border-top: @coloredBorderSize solid @green;\n}\n.ui.inverted.green.table {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\n.ui.teal.table {\n border-top: @coloredBorderSize solid @teal;\n}\n.ui.inverted.teal.table {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\n.ui.blue.table {\n border-top: @coloredBorderSize solid @blue;\n}\n.ui.inverted.blue.table {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\n.ui.violet.table {\n border-top: @coloredBorderSize solid @violet;\n}\n.ui.inverted.violet.table {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\n.ui.purple.table {\n border-top: @coloredBorderSize solid @purple;\n}\n.ui.inverted.purple.table {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\n.ui.pink.table {\n border-top: @coloredBorderSize solid @pink;\n}\n.ui.inverted.pink.table {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\n.ui.brown.table {\n border-top: @coloredBorderSize solid @brown;\n}\n.ui.inverted.brown.table {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\n.ui.grey.table {\n border-top: @coloredBorderSize solid @grey;\n}\n.ui.inverted.grey.table {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\n.ui.black.table {\n border-top: @coloredBorderSize solid @black;\n}\n.ui.inverted.black.table {\n background-color: @black !important;\n color: @white !important;\n}\n\n\n/*--------------\n Column Count\n---------------*/\n\n/* Grid Based */\n.ui.one.column.table td {\n width: @oneColumn;\n}\n.ui.two.column.table td {\n width: @twoColumn;\n}\n.ui.three.column.table td {\n width: @threeColumn;\n}\n.ui.four.column.table td {\n width: @fourColumn;\n}\n.ui.five.column.table td {\n width: @fiveColumn;\n}\n.ui.six.column.table td {\n width: @sixColumn;\n}\n.ui.seven.column.table td {\n width: @sevenColumn;\n}\n.ui.eight.column.table td {\n width: @eightColumn;\n}\n.ui.nine.column.table td {\n width: @nineColumn;\n}\n.ui.ten.column.table td {\n width: @tenColumn;\n}\n.ui.eleven.column.table td {\n width: @elevenColumn;\n}\n.ui.twelve.column.table td {\n width: @twelveColumn;\n}\n.ui.thirteen.column.table td {\n width: @thirteenColumn;\n}\n.ui.fourteen.column.table td {\n width: @fourteenColumn;\n}\n.ui.fifteen.column.table td {\n width: @fifteenColumn;\n}\n.ui.sixteen.column.table td {\n width: @sixteenColumn;\n}\n\n/* Column Width */\n.ui.table th.one.wide,\n.ui.table td.one.wide {\n width: @oneWide;\n}\n.ui.table th.two.wide,\n.ui.table td.two.wide {\n width: @twoWide;\n}\n.ui.table th.three.wide,\n.ui.table td.three.wide {\n width: @threeWide;\n}\n.ui.table th.four.wide,\n.ui.table td.four.wide {\n width: @fourWide;\n}\n.ui.table th.five.wide,\n.ui.table td.five.wide {\n width: @fiveWide;\n}\n.ui.table th.six.wide,\n.ui.table td.six.wide {\n width: @sixWide;\n}\n.ui.table th.seven.wide,\n.ui.table td.seven.wide {\n width: @sevenWide;\n}\n.ui.table th.eight.wide,\n.ui.table td.eight.wide {\n width: @eightWide;\n}\n.ui.table th.nine.wide,\n.ui.table td.nine.wide {\n width: @nineWide;\n}\n.ui.table th.ten.wide,\n.ui.table td.ten.wide {\n width: @tenWide;\n}\n.ui.table th.eleven.wide,\n.ui.table td.eleven.wide {\n width: @elevenWide;\n}\n.ui.table th.twelve.wide,\n.ui.table td.twelve.wide {\n width: @twelveWide;\n}\n.ui.table th.thirteen.wide,\n.ui.table td.thirteen.wide {\n width: @thirteenWide;\n}\n.ui.table th.fourteen.wide,\n.ui.table td.fourteen.wide {\n width: @fourteenWide;\n}\n.ui.table th.fifteen.wide,\n.ui.table td.fifteen.wide {\n width: @fifteenWide;\n}\n.ui.table th.sixteen.wide,\n.ui.table td.sixteen.wide {\n width: @sixteenWide;\n}\n\n/*--------------\n Sortable\n---------------*/\n\n.ui.sortable.table thead th {\n cursor: pointer;\n white-space: nowrap;\n border-left: @sortableBorder;\n color: @sortableColor;\n}\n.ui.sortable.table thead th:first-child {\n border-left: none;\n}\n.ui.sortable.table thead th.sorted,\n.ui.sortable.table thead th.sorted:hover {\n user-select: none;\n}\n\n.ui.sortable.table thead th:after {\n display: none;\n font-style: normal;\n font-weight: @normal;\n text-decoration: inherit;\n content: '';\n height: 1em;\n width: @sortableIconWidth;\n opacity: @sortableIconOpacity;\n margin: 0em 0em 0em @sortableIconDistance;\n font-family: @sortableIconFont;\n}\n.ui.sortable.table thead th.ascending:after {\n content: @sortableIconAscending;\n}\n.ui.sortable.table thead th.descending:after {\n content: @sortableIconDescending;\n}\n\n/* Hover */\n.ui.sortable.table th.disabled:hover {\n cursor: auto;\n color: @sortableDisabledColor;\n}\n.ui.sortable.table thead th:hover {\n background: @sortableHoverBackground;\n color: @sortableHoverColor;\n}\n\n/* Sorted */\n.ui.sortable.table thead th.sorted {\n background: @sortableActiveBackground;\n color: @sortableActiveColor;\n}\n.ui.sortable.table thead th.sorted:after {\n display: inline-block;\n}\n\n/* Sorted Hover */\n.ui.sortable.table thead th.sorted:hover {\n background: @sortableActiveHoverBackground;\n color: @sortableActiveHoverColor;\n}\n\n/* Inverted */\n.ui.inverted.sortable.table thead th.sorted {\n background: @sortableInvertedActiveBackground;\n color: @sortableInvertedActiveColor;\n}\n.ui.inverted.sortable.table thead th:hover {\n background: @sortableInvertedHoverBackground;\n color: @sortableInvertedHoverColor;\n}\n.ui.inverted.sortable.table thead th {\n border-left-color: @sortableInvertedBorderColor;\n border-right-color: @sortableInvertedBorderColor;\n}\n\n\n/*--------------\n Inverted\n---------------*/\n\n/* Text Color */\n.ui.inverted.table {\n background: @invertedBackground;\n color: @invertedCellColor;\n border: @invertedBorder;\n}\n.ui.inverted.table th {\n background-color: @invertedHeaderBackground;\n border-color: @invertedHeaderBorderColor !important;\n color: @invertedHeaderColor !important;\n}\n.ui.inverted.table tr td {\n border-color: @invertedCellBorderColor !important;\n}\n\n.ui.inverted.table tr.disabled td,\n.ui.inverted.table tr td.disabled,\n.ui.inverted.table tr.disabled:hover td,\n.ui.inverted.table tr:hover td.disabled {\n pointer-events: none;\n color: @invertedDisabledTextColor;\n}\n\n/* Definition */\n.ui.inverted.definition.table tfoot:not(.full-width) th:first-child,\n.ui.inverted.definition.table thead:not(.full-width) th:first-child {\n background: @definitionPageBackground;\n}\n.ui.inverted.definition.table tr td:first-child {\n background: @invertedDefinitionColumnBackground;\n color: @invertedDefinitionColumnColor;\n}\n\n/*--------------\n Collapsing\n---------------*/\n\n.ui.collapsing.table {\n width: auto;\n}\n\n/*--------------\n Basic\n---------------*/\n\n.ui.basic.table {\n background: @basicTableBackground;\n border: @basicTableBorder;\n box-shadow: @basicBoxShadow;\n}\n.ui.basic.table thead,\n.ui.basic.table tfoot {\n box-shadow: none;\n}\n.ui.basic.table th {\n background: @basicTableHeaderBackground;\n border-left: @basicTableHeaderDivider;\n}\n.ui.basic.table tbody tr {\n border-bottom: @basicTableCellBorder;\n}\n.ui.basic.table td {\n background: @basicTableCellBackground;\n}\n.ui.basic.striped.table tbody tr:nth-child(2n) {\n background-color: @basicTableStripedBackground !important;\n}\n\n/* Very Basic */\n.ui[class*=\"very basic\"].table {\n border: none;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td {\n padding: @basicTableCellPadding;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th:first-child,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td:first-child {\n padding-left: 0em;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) th:last-child,\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) td:last-child {\n padding-right: 0em;\n}\n.ui[class*=\"very basic\"].table:not(.sortable):not(.striped) thead tr:first-child th {\n padding-top: 0em;\n}\n\n/*--------------\n Celled\n---------------*/\n\n.ui.celled.table tr th,\n.ui.celled.table tr td {\n border-left: @cellBorder;\n}\n.ui.celled.table tr th:first-child,\n.ui.celled.table tr td:first-child {\n border-left: none;\n}\n\n/*--------------\n Padded\n---------------*/\n\n.ui.padded.table th {\n padding-left: @paddedHorizontalPadding;\n padding-right: @paddedHorizontalPadding;\n}\n.ui.padded.table th,\n.ui.padded.table td {\n padding: @paddedVerticalPadding @paddedHorizontalPadding;\n}\n\n/* Very */\n.ui[class*=\"very padded\"].table th {\n padding-left: @veryPaddedHorizontalPadding;\n padding-right: @veryPaddedHorizontalPadding;\n}\n.ui[class*=\"very padded\"].table td {\n padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding;\n}\n\n/*--------------\n Compact\n---------------*/\n\n.ui.compact.table th {\n padding-left: @compactHorizontalPadding;\n padding-right: @compactHorizontalPadding;\n}\n.ui.compact.table td {\n padding: @compactVerticalPadding @compactHorizontalPadding;\n}\n\n/* Very */\n.ui[class*=\"very compact\"].table th {\n padding-left: @veryCompactHorizontalPadding;\n padding-right: @veryCompactHorizontalPadding;\n}\n.ui[class*=\"very compact\"].table td {\n padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n/* Small */\n.ui.small.table {\n font-size: @small;\n}\n\n/* Standard */\n.ui.table {\n font-size: @medium;\n}\n\n/* Large */\n.ui.large.table {\n font-size: @large;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/button.less", "content": "/*!\n * # Semantic UI - Button\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'button';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Button\n*******************************/\n\n.ui.button {\n cursor: pointer;\n display: inline-block;\n\n min-height: 1em;\n\n outline: none;\n border: none;\n vertical-align: @verticalAlign;\n background: @background;\n color: @textColor;\n\n font-family: @fontFamily;\n\n margin: 0em @horizontalMargin @verticalMargin 0em;\n padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);\n\n text-transform: @textTransform;\n text-shadow: @textShadow;\n font-weight: @fontWeight;\n line-height: @lineHeight;\n font-style: normal;\n text-align: center;\n text-decoration: none;\n\n border-radius: @borderRadius;\n box-shadow: @boxShadow;\n\n user-select: none;\n transition: @transition;\n will-change: @willChange;\n\n -webkit-tap-highlight-color: @tapColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Hover\n---------------*/\n\n.ui.button:hover {\n background-color: @hoverBackgroundColor;\n background-image: @hoverBackgroundImage;\n box-shadow: @hoverBoxShadow;\n color: @hoverColor;\n}\n\n.ui.button:hover .icon {\n opacity: @iconHoverOpacity;\n}\n\n/*--------------\n Focus\n---------------*/\n\n.ui.button:focus {\n background-color: @focusBackgroundColor;\n color: @focusColor;\n background-image: @focusBackgroundImage !important;\n box-shadow: @focusBoxShadow !important;\n}\n\n.ui.button:focus .icon {\n opacity: @iconFocusOpacity;\n}\n\n/*--------------\n Down\n---------------*/\n\n.ui.button:active,\n.ui.active.button:active {\n background-color: @downBackgroundColor;\n background-image: @downBackgroundImage;\n color: @downColor;\n box-shadow: @downBoxShadow;\n}\n\n/*--------------\n Active\n---------------*/\n\n.ui.active.button {\n background-color: @activeBackgroundColor;\n background-image: @activeBackgroundImage;\n box-shadow: @activeBoxShadow;\n color: @activeColor;\n}\n.ui.active.button:hover {\n background-color: @activeHoverBackgroundColor;\n background-image: @activeHoverBackgroundImage;\n color: @activeHoverColor;\n}\n.ui.active.button:active {\n background-color: @activeBackgroundColor;\n background-image: @activeBackgroundImage;\n}\n\n\n/*--------------\n Loading\n---------------*/\n\n/* Specificity hack */\n.ui.loading.loading.loading.loading.loading.loading.button {\n position: relative;\n cursor: default;\n text-shadow: none !important;\n color: transparent !important;\n opacity: @loadingOpacity;\n pointer-events: @loadingPointerEvents;\n transition: @loadingTransition;\n}\n.ui.loading.button:before {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @invertedLoaderFillColor;\n}\n.ui.loading.button:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: button-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @invertedLoaderLineColor transparent transparent;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n.ui.labeled.icon.loading.button .icon {\n background-color: transparent;\n box-shadow: none;\n}\n\n@keyframes button-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.ui.basic.loading.button:not(.inverted):before {\n border-color: @loaderFillColor;\n}\n.ui.basic.loading.button:not(.inverted):after {\n border-top-color: @loaderLineColor;\n}\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.buttons .disabled.button,\n.ui.disabled.button,\n.ui.button:disabled,\n.ui.disabled.button:hover,\n.ui.disabled.active.button {\n cursor: default;\n opacity: @disabledOpacity !important;\n background-image: none !important;\n box-shadow: none !important;\n pointer-events: none !important;\n}\n\n/* Basic Group With Disabled */\n.ui.basic.buttons .ui.disabled.button {\n border-color: @disabledBorderColor;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Animated\n--------------------*/\n\n.ui.animated.button {\n position: relative;\n overflow: hidden;\n padding-right: 0em !important;\n vertical-align: @animatedVerticalAlign;\n z-index: @animatedZIndex;\n}\n\n.ui.animated.button .content {\n will-change: transform, opacity;\n}\n.ui.animated.button .visible.content {\n position: relative;\n margin-right: @horizontalPadding;\n}\n.ui.animated.button .hidden.content {\n position: absolute;\n width: 100%;\n}\n\n/* Horizontal */\n.ui.animated.button .visible.content,\n.ui.animated.button .hidden.content {\n transition: right @animationDuration @animationEasing 0s;\n}\n.ui.animated.button .visible.content {\n left: auto;\n right: 0%;\n}\n.ui.animated.button .hidden.content {\n top: 50%;\n left: auto;\n right: -100%;\n margin-top: -(@lineHeight / 2);\n}\n.ui.animated.button:focus .visible.content,\n.ui.animated.button:hover .visible.content {\n left: auto;\n right: 200%;\n}\n.ui.animated.button:focus .hidden.content,\n.ui.animated.button:hover .hidden.content {\n left: auto;\n right: 0%;\n}\n\n/* Vertical */\n.ui.vertical.animated.button .visible.content,\n.ui.vertical.animated.button .hidden.content {\n transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;\n}\n.ui.vertical.animated.button .visible.content {\n transform: translateY(0%);\n right: auto;\n}\n.ui.vertical.animated.button .hidden.content {\n top: -50%;\n left: 0%;\n right: auto;\n}\n.ui.vertical.animated.button:focus .visible.content,\n.ui.vertical.animated.button:hover .visible.content {\n transform: translateY(200%);\n right: auto;\n}\n.ui.vertical.animated.button:focus .hidden.content,\n.ui.vertical.animated.button:hover .hidden.content {\n top: 50%;\n right: auto;\n}\n\n/* Fade */\n.ui.fade.animated.button .visible.content,\n.ui.fade.animated.button .hidden.content {\n transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;\n}\n.ui.fade.animated.button .visible.content {\n left: auto;\n right: auto;\n opacity: 1;\n transform: scale(1);\n}\n.ui.fade.animated.button .hidden.content {\n opacity: 0;\n left: 0%;\n right: auto;\n transform: scale(@fadeScaleHigh);\n}\n.ui.fade.animated.button:focus .visible.content,\n.ui.fade.animated.button:hover .visible.content {\n left: auto;\n right: auto;\n opacity: 0;\n transform: scale(@fadeScaleLow);\n}\n.ui.fade.animated.button:focus .hidden.content,\n.ui.fade.animated.button:hover .hidden.content {\n left: 0%;\n right: auto;\n opacity: 1;\n transform: scale(1);\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n background: transparent none;\n color: @white;\n text-shadow: none !important;\n}\n\n/* Group */\n.ui.inverted.buttons .button {\n margin: @invertedGroupButtonOffset;\n}\n.ui.inverted.buttons .button:first-child {\n margin-left: 0em;\n}\n.ui.inverted.vertical.buttons .button {\n margin: @invertedVerticalGroupButtonOffset;\n}\n.ui.inverted.vertical.buttons .button:first-child {\n margin-top: 0em;\n}\n\n/* States */\n\n/* Hover */\n.ui.inverted.button:hover {\n background: @white;\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n color: @hoverColor;\n}\n\n/* Active / Focus */\n.ui.inverted.button:focus,\n.ui.inverted.button.active {\n background: @white;\n box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important;\n color: @focusColor;\n}\n\n/* Active Focus */\n.ui.inverted.button.active:focus {\n background: @midWhite;\n box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important;\n color: @focusColor;\n}\n\n\n/*-------------------\n Labeled Button\n--------------------*/\n\n.ui.labeled.button:not(.icon) {\n display: inline-flex;\n flex-direction: row;\n background: none !important;\n padding: 0px !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ui.labeled.button > .button {\n margin: 0px;\n}\n.ui.labeled.button > .label {\n display: flex;\n align-items: @labeledLabelAlign;\n margin: 0px 0px 0px @labeledLabelBorderOffset !important;\n font-size: @labeledLabelFontSize;\n padding: @labeledLabelPadding;\n font-size: @labeledLabelFontSize;\n border-color: @labeledLabelBorderColor;\n}\n\n/* Tag */\n.ui.labeled.button > .tag.label:before {\n width: @labeledTagLabelSize;\n height: @labeledTagLabelSize;\n}\n\n/* Right */\n.ui.labeled.button:not([class*=\"left labeled\"]) > .button {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n.ui.labeled.button:not([class*=\"left labeled\"]) > .label {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n/* Left Side */\n.ui[class*=\"left labeled\"].button > .button {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n.ui[class*=\"left labeled\"].button > .label {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n/*-------------------\n Social\n--------------------*/\n\n/* Facebook */\n.ui.facebook.button {\n background-color: @facebookColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.facebook.button:hover {\n background-color: @facebookHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.facebook.button:active {\n background-color: @facebookDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Twitter */\n.ui.twitter.button {\n background-color: @twitterColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.twitter.button:hover {\n background-color: @twitterHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.twitter.button:active {\n background-color: @twitterDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Google Plus */\n.ui.google.plus.button {\n background-color: @googlePlusColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.google.plus.button:hover {\n background-color: @googlePlusHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.google.plus.button:active {\n background-color: @googlePlusDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Linked In */\n.ui.linkedin.button {\n background-color: @linkedInColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.linkedin.button:hover {\n background-color: @linkedInHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.linkedin.button:active {\n background-color: @linkedInDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* YouTube */\n.ui.youtube.button {\n background-color: @youtubeColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.youtube.button:hover {\n background-color: @youtubeHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.youtube.button:active {\n background-color: @youtubeDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Instagram */\n.ui.instagram.button {\n background-color: @instagramColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.instagram.button:hover {\n background-color: @instagramHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.instagram.button:active {\n background-color: @instagramDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* Pinterest */\n.ui.pinterest.button {\n background-color: @pinterestColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.pinterest.button:hover {\n background-color: @pinterestHoverColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n.ui.pinterest.button:active {\n background-color: @pinterestDownColor;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n}\n\n/* VK */\n.ui.vk.button {\n background-color: #4D7198;\n color: @white;\n background-image: @coloredBackgroundImage;\n box-shadow: @coloredBoxShadow;\n}\n.ui.vk.button:hover {\n background-color: @vkHoverColor;\n color: @white;\n}\n.ui.vk.button:active {\n background-color: @vkDownColor;\n color: @white;\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.button > .icon:not(.button) {\n height: @iconHeight;\n opacity: @iconOpacity;\n margin: @iconMargin;\n transition: @iconTransition;\n vertical-align: @iconVerticalAlign;\n color: @iconColor;\n}\n\n.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {\n margin: @iconMargin;\n}\n.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {\n margin: @rightIconMargin;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui[class*=\"left floated\"].buttons,\n.ui[class*=\"left floated\"].button {\n float: left;\n margin-left: 0em;\n margin-right: @floatedMargin;\n}\n.ui[class*=\"right floated\"].buttons,\n.ui[class*=\"right floated\"].button {\n float: right;\n margin-right: 0em;\n margin-left: @floatedMargin;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.buttons .button,\n.ui.compact.button {\n padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset );\n}\n.ui.compact.icon.buttons .button,\n.ui.compact.icon.button {\n padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset );\n}\n.ui.compact.labeled.icon.buttons .button,\n.ui.compact.labeled.icon.button {\n padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset );\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.buttons .button,\n.ui.mini.buttons .or,\n.ui.mini.button {\n font-size: @mini;\n}\n.ui.tiny.buttons .button,\n.ui.tiny.buttons .or,\n.ui.tiny.button {\n font-size: @tiny;\n}\n.ui.small.buttons .button,\n.ui.small.buttons .or,\n.ui.small.button {\n font-size: @small;\n}\n.ui.buttons .button,\n.ui.buttons .or,\n.ui.button {\n font-size: @medium;\n}\n.ui.large.buttons .button,\n.ui.large.buttons .or,\n.ui.large.button {\n font-size: @large;\n}\n.ui.big.buttons .button,\n.ui.big.buttons .or,\n.ui.big.button {\n font-size: @big;\n}\n.ui.huge.buttons .button,\n.ui.huge.buttons .or,\n.ui.huge.button {\n font-size: @huge;\n}\n.ui.massive.buttons .button,\n.ui.massive.buttons .or,\n.ui.massive.button {\n font-size: @massive;\n}\n\n/*--------------\n Icon Only\n---------------*/\n\n.ui.icon.buttons .button,\n.ui.icon.button {\n padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset );\n}\n.ui.icon.buttons .button > .icon,\n.ui.icon.button > .icon {\n opacity: @iconButtonOpacity;\n margin: 0em !important;\n vertical-align: top;\n}\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.buttons .button,\n.ui.basic.button {\n background: @basicBackground !important;\n color: @basicTextColor !important;\n font-weight: @basicFontWeight;\n border-radius: @basicBorderRadius;\n text-transform: @basicTextTransform;\n text-shadow: none !important;\n box-shadow: @basicBoxShadow;\n}\n.ui.basic.buttons {\n box-shadow: @basicGroupBoxShadow;\n border: @basicGroupBorder;\n border-radius: @borderRadius;\n}\n.ui.basic.buttons .button {\n border-radius: 0em;\n}\n\n.ui.basic.buttons .button:hover,\n.ui.basic.button:hover {\n background: @basicHoverBackground !important;\n color: @basicHoverTextColor !important;\n box-shadow: @basicHoverBoxShadow;\n}\n.ui.basic.buttons .button:focus,\n.ui.basic.button:focus {\n background: @basicFocusBackground !important;\n color: @basicFocusTextColor !important;\n box-shadow: @basicFocusBoxShadow;\n}\n.ui.basic.buttons .button:active,\n.ui.basic.button:active {\n background: @basicDownBackground !important;\n color: @basicDownTextColor !important;\n box-shadow: @basicDownBoxShadow;\n}\n.ui.basic.buttons .active.button,\n.ui.basic.active.button {\n background: @basicActiveBackground !important;\n box-shadow: @basicActiveBoxShadow !important;\n color: @basicActiveTextColor !important;\n}\n.ui.basic.buttons .active.button:hover,\n.ui.basic.active.button:hover {\n background-color: @transparentBlack;\n}\n\n/* Vertical */\n.ui.basic.buttons .button:hover {\n box-shadow: @basicHoverBoxShadow inset;\n}\n.ui.basic.buttons .button:active {\n box-shadow: @basicDownBoxShadow inset;\n}\n.ui.basic.buttons .active.button {\n box-shadow: @basicActiveBoxShadow !important;\n}\n\n/* Standard Basic Inverted */\n.ui.basic.inverted.buttons .button,\n.ui.basic.inverted.button {\n background-color: transparent !important;\n color: @offWhite !important;\n box-shadow: @basicInvertedBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:hover,\n.ui.basic.inverted.button:hover {\n color: @white !important;\n box-shadow: @basicInvertedHoverBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:focus,\n.ui.basic.inverted.button:focus {\n color: @white !important;\n box-shadow: @basicInvertedFocusBoxShadow !important;\n}\n.ui.basic.inverted.buttons .button:active,\n.ui.basic.inverted.button:active {\n background-color: @transparentWhite !important;\n color: @white !important;\n box-shadow: @basicInvertedDownBoxShadow !important;\n}\n.ui.basic.inverted.buttons .active.button,\n.ui.basic.inverted.active.button {\n background-color: @transparentWhite;\n color: @invertedTextColor;\n text-shadow: @invertedTextShadow;\n box-shadow: @basicInvertedActiveBoxShadow;\n}\n.ui.basic.inverted.buttons .active.button:hover,\n.ui.basic.inverted.active.button:hover {\n background-color: @strongTransparentWhite;\n box-shadow: @basicInvertedHoverBoxShadow !important;\n}\n\n\n/* Basic Group */\n.ui.basic.buttons .button {\n border-left: @basicGroupBorder;\n box-shadow: none;\n}\n.ui.basic.vertical.buttons .button {\n border-left: none;\n}\n.ui.basic.vertical.buttons .button {\n border-left-width: 0px;\n border-top: @basicGroupBorder;\n}\n.ui.basic.vertical.buttons .button:first-child {\n border-top-width: 0px;\n}\n\n\n\n/*--------------\n Labeled Icon\n---------------*/\n\n.ui.labeled.icon.buttons .button,\n.ui.labeled.icon.button {\n position: relative;\n padding-left: @labeledIconPadding !important;\n padding-right: @horizontalPadding !important;\n}\n\n/* Left Labeled */\n.ui.labeled.icon.buttons > .button > .icon,\n.ui.labeled.icon.button > .icon {\n position: absolute;\n height: 100%;\n line-height: 1;\n border-radius: 0px;\n border-top-left-radius: inherit;\n border-bottom-left-radius: inherit;\n text-align: center;\n\n margin: @labeledIconMargin;\n width: @labeledIconWidth;\n background-color: @labeledIconBackgroundColor;\n color: @labeledIconColor;\n box-shadow: @labeledIconLeftShadow;\n}\n\n/* Left Labeled */\n.ui.labeled.icon.buttons > .button > .icon,\n.ui.labeled.icon.button > .icon {\n top: 0em;\n left: 0em;\n}\n\n/* Right Labeled */\n.ui[class*=\"right labeled\"].icon.button {\n padding-right: @labeledIconPadding !important;\n padding-left: @horizontalPadding !important;\n}\n.ui[class*=\"right labeled\"].icon.button > .icon {\n left: auto;\n right: 0em;\n border-radius: 0px;\n border-top-right-radius: inherit;\n border-bottom-right-radius: inherit;\n box-shadow: @labeledIconRightShadow;\n}\n\n\n.ui.labeled.icon.buttons > .button > .icon:before,\n.ui.labeled.icon.button > .icon:before,\n.ui.labeled.icon.buttons > .button > .icon:after,\n.ui.labeled.icon.button > .icon:after {\n display: block;\n position: absolute;\n width: 100%;\n top: 50%;\n text-align: center;\n transform: translateY(-50%);\n}\n\n.ui.labeled.icon.buttons .button > .icon {\n border-radius: 0em;\n}\n.ui.labeled.icon.buttons .button:first-child > .icon {\n border-top-left-radius: @borderRadius;\n border-bottom-left-radius: @borderRadius;\n}\n.ui.labeled.icon.buttons .button:last-child > .icon {\n border-top-right-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n.ui.vertical.labeled.icon.buttons .button:first-child > .icon {\n border-radius: 0em;\n border-top-left-radius: @borderRadius;\n}\n.ui.vertical.labeled.icon.buttons .button:last-child > .icon {\n border-radius: 0em;\n border-bottom-left-radius: @borderRadius;\n}\n\n/* Fluid Labeled */\n.ui.fluid[class*=\"left labeled\"].icon.button,\n.ui.fluid[class*=\"right labeled\"].icon.button {\n padding-left: @horizontalPadding !important;\n padding-right: @horizontalPadding !important;\n}\n\n\n\n\n/*--------------\n Toggle\n---------------*/\n\n/* Toggle (Modifies active state to give affordances) */\n.ui.toggle.buttons .active.button,\n.ui.buttons .button.toggle.active,\n.ui.button.toggle.active {\n background-color: @positiveColor !important;\n box-shadow: none !important;\n text-shadow: @invertedTextShadow;\n color: @invertedTextColor !important;\n}\n.ui.button.toggle.active:hover {\n background-color: @positiveColorHover !important;\n text-shadow: @invertedTextShadow;\n color: @invertedTextColor !important;\n}\n\n/*--------------\n Circular\n---------------*/\n\n.ui.circular.button {\n border-radius: 10em;\n}\n.ui.circular.button > .icon {\n width: 1em;\n vertical-align: baseline;\n}\n\n\n/*-------------------\n Or Buttons\n--------------------*/\n\n.ui.buttons .or {\n position: relative;\n width: @orGap;\n height: @orHeight;\n z-index: @orZIndex;\n}\n.ui.buttons .or:before {\n position: absolute;\n text-align: center;\n border-radius: @circularRadius;\n\n content: @orText;\n top: 50%;\n left: 50%;\n background-color: @orBackgroundColor;\n text-shadow: @orTextShadow;\n\n margin-top: @orVerticalOffset;\n margin-left: @orHorizontalOffset;\n\n width: @orCircleSize;\n height: @orCircleSize;\n\n line-height: @orLineHeight;\n color: @orTextColor;\n\n font-style: @orTextStyle;\n font-weight: @orTextWeight;\n\n box-shadow: @orBoxShadow;\n}\n.ui.buttons .or[data-text]:before {\n content: attr(data-text);\n}\n\n/* Fluid Or */\n.ui.fluid.buttons .or {\n width: 0em !important;\n}\n.ui.fluid.buttons .or:after {\n display: none;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n\n/* Singular */\n.ui.attached.button {\n position: relative;\n display: block;\n margin: 0em;\n border-radius: 0em;\n box-shadow: @attachedBoxShadow !important;\n}\n\n/* Top / Bottom */\n.ui.attached.top.button {\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.attached.bottom.button {\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Left / Right */\n.ui.left.attached.button {\n display: inline-block;\n border-left: none;\n text-align: right;\n\n padding-right: @attachedHorizontalPadding;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui.right.attached.button {\n display: inline-block;\n text-align: left;\n padding-left: @attachedHorizontalPadding;\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n\n/* Plural */\n.ui.attached.buttons {\n position: relative;\n display: flex;\n border-radius: 0em;\n width: auto !important;\n z-index: @attachedZIndex;\n margin-left: @attachedOffset;\n margin-right: @attachedOffset;\n}\n.ui.attached.buttons .button {\n margin: 0em;\n}\n.ui.attached.buttons .button:first-child {\n border-radius: 0em;\n}\n.ui.attached.buttons .button:last-child {\n border-radius: 0em;\n}\n\n/* Top / Bottom */\n.ui[class*=\"top attached\"].buttons {\n margin-bottom: @attachedOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui[class*=\"top attached\"].buttons .button:first-child {\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui[class*=\"top attached\"].buttons .button:last-child {\n border-radius: 0em @borderRadius 0em 0em;\n}\n\n.ui[class*=\"bottom attached\"].buttons {\n margin-top: @attachedOffset;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui[class*=\"bottom attached\"].buttons .button:first-child {\n border-radius: 0em 0em 0em @borderRadius;\n}\n.ui[class*=\"bottom attached\"].buttons .button:last-child {\n border-radius: 0em 0em @borderRadius 0em;\n}\n\n/* Left / Right */\n.ui[class*=\"left attached\"].buttons {\n display: inline-flex;\n margin-right: 0em;\n margin-left: @attachedOffset;\n border-radius: 0em @borderRadius @borderRadius 0em;\n}\n.ui[class*=\"left attached\"].buttons .button:first-child {\n margin-left: @attachedOffset;\n border-radius: 0em @borderRadius 0em 0em;\n}\n.ui[class*=\"left attached\"].buttons .button:last-child {\n margin-left: @attachedOffset;\n border-radius: 0em 0em @borderRadius 0em;\n}\n\n.ui[class*=\"right attached\"].buttons {\n display: inline-flex;\n margin-left: 0em;\n margin-right: @attachedOffset;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"right attached\"].buttons .button:first-child {\n margin-left: @attachedOffset;\n border-radius: @borderRadius 0em 0em 0em;\n}\n.ui[class*=\"right attached\"].buttons .button:last-child {\n margin-left: @attachedOffset;\n border-radius: 0em 0em 0em @borderRadius;\n}\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.fluid.buttons,\n.ui.fluid.button {\n width: 100%;\n}\n.ui.fluid.button {\n display: block;\n}\n\n.ui.two.buttons {\n width: 100%;\n}\n.ui.two.buttons > .button {\n width: 50%;\n}\n\n.ui.three.buttons {\n width: 100%;\n}\n.ui.three.buttons > .button {\n width: 33.333%;\n}\n\n.ui.four.buttons {\n width: 100%;\n}\n.ui.four.buttons > .button {\n width: 25%;\n}\n\n.ui.five.buttons {\n width: 100%;\n}\n.ui.five.buttons > .button {\n width: 20%;\n}\n\n.ui.six.buttons {\n width: 100%;\n}\n.ui.six.buttons > .button {\n width: 16.666%;\n}\n\n.ui.seven.buttons {\n width: 100%;\n}\n.ui.seven.buttons > .button {\n width: 14.285%;\n}\n\n.ui.eight.buttons {\n width: 100%;\n}\n.ui.eight.buttons > .button {\n width: 12.500%;\n}\n\n.ui.nine.buttons {\n width: 100%;\n}\n.ui.nine.buttons > .button {\n width: 11.11%;\n}\n\n.ui.ten.buttons {\n width: 100%;\n}\n.ui.ten.buttons > .button {\n width: 10%;\n}\n\n.ui.eleven.buttons {\n width: 100%;\n}\n.ui.eleven.buttons > .button {\n width: 9.09%;\n}\n\n.ui.twelve.buttons {\n width: 100%;\n}\n.ui.twelve.buttons > .button {\n width: 8.3333%;\n}\n\n/* Fluid Vertical Buttons */\n.ui.fluid.vertical.buttons,\n.ui.fluid.vertical.buttons > .button {\n display: flex;\n width: auto;\n}\n\n.ui.two.vertical.buttons > .button {\n height: 50%;\n}\n.ui.three.vertical.buttons > .button {\n height: 33.333%;\n}\n.ui.four.vertical.buttons > .button {\n height: 25%;\n}\n.ui.five.vertical.buttons > .button {\n height: 20%;\n}\n.ui.six.vertical.buttons > .button {\n height: 16.666%;\n}\n.ui.seven.vertical.buttons > .button {\n height: 14.285%;\n}\n.ui.eight.vertical.buttons > .button {\n height: 12.500%;\n}\n.ui.nine.vertical.buttons > .button {\n height: 11.11%;\n}\n.ui.ten.vertical.buttons > .button {\n height: 10%;\n}\n.ui.eleven.vertical.buttons > .button {\n height: 9.09%;\n}\n.ui.twelve.vertical.buttons > .button {\n height: 8.3333%;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Black ---*/\n.ui.black.buttons .button,\n.ui.black.button {\n background-color: @black;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.black.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.black.buttons .button:hover,\n.ui.black.button:hover {\n background-color: @blackHover;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .button:focus,\n.ui.black.button:focus {\n background-color: @blackFocus;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .button:active,\n.ui.black.button:active {\n background-color: @blackDown;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n.ui.black.buttons .active.button,\n.ui.black.buttons .active.button:active,\n.ui.black.active.button,\n.ui.black.button .active.button:active {\n background-color: @blackActive;\n color: @blackTextColor;\n text-shadow: @blackTextShadow;\n}\n\n/* Basic */\n.ui.basic.black.buttons .button,\n.ui.basic.black.button {\n box-shadow: 0px 0px 0px @basicBorderSize @black inset !important;\n color: @black !important;\n}\n.ui.basic.black.buttons .button:hover,\n.ui.basic.black.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important;\n color: @blackHover !important;\n}\n.ui.basic.black.buttons .button:focus,\n.ui.basic.black.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important;\n color: @blackHover !important;\n}\n.ui.basic.black.buttons .active.button,\n.ui.basic.black.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important;\n color: @blackDown !important;\n}\n.ui.basic.black.buttons .button:active,\n.ui.basic.black.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important;\n color: @blackDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.black.buttons .button,\n.ui.inverted.black.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;\n color: @invertedTextColor;\n}\n.ui.inverted.black.buttons .button:hover,\n.ui.inverted.black.button:hover,\n.ui.inverted.black.buttons .button:focus,\n.ui.inverted.black.button:focus,\n.ui.inverted.black.buttons .button.active,\n.ui.inverted.black.button.active,\n.ui.inverted.black.buttons .button:active,\n.ui.inverted.black.button:active {\n box-shadow: none !important;\n color: @lightBlackTextColor;\n}\n.ui.inverted.black.buttons .button:hover,\n.ui.inverted.black.button:hover {\n background-color: @lightBlackHover;\n}\n.ui.inverted.black.buttons .button:focus,\n.ui.inverted.black.button:focus {\n background-color: @lightBlackFocus;\n}\n.ui.inverted.black.buttons .active.button,\n.ui.inverted.black.active.button {\n background-color: @lightBlackActive;\n}\n.ui.inverted.black.buttons .button:active,\n.ui.inverted.black.button:active {\n background-color: @lightBlackDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.black.basic.buttons .button,\n.ui.inverted.black.buttons .basic.button,\n.ui.inverted.black.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:hover,\n.ui.inverted.black.buttons .basic.button:hover,\n.ui.inverted.black.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:focus,\n.ui.inverted.black.basic.buttons .button:focus,\n.ui.inverted.black.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important;\n color: @lightBlack !important;\n}\n.ui.inverted.black.basic.buttons .active.button,\n.ui.inverted.black.buttons .basic.active.button,\n.ui.inverted.black.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important;\n color: @white !important;\n}\n.ui.inverted.black.basic.buttons .button:active,\n.ui.inverted.black.buttons .basic.button:active,\n.ui.inverted.black.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important;\n color: @white !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.buttons .button,\n.ui.grey.button {\n background-color: @grey;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.grey.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.grey.buttons .button:hover,\n.ui.grey.button:hover {\n background-color: @greyHover;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .button:focus,\n.ui.grey.button:focus {\n background-color: @greyFocus;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .button:active,\n.ui.grey.button:active {\n background-color: @greyDown;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n.ui.grey.buttons .active.button,\n.ui.grey.buttons .active.button:active,\n.ui.grey.active.button,\n.ui.grey.button .active.button:active {\n background-color: @greyActive;\n color: @greyTextColor;\n text-shadow: @greyTextShadow;\n}\n\n/* Basic */\n.ui.basic.grey.buttons .button,\n.ui.basic.grey.button {\n box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important;\n color: @grey !important;\n}\n.ui.basic.grey.buttons .button:hover,\n.ui.basic.grey.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important;\n color: @greyHover !important;\n}\n.ui.basic.grey.buttons .button:focus,\n.ui.basic.grey.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important;\n color: @greyHover !important;\n}\n.ui.basic.grey.buttons .active.button,\n.ui.basic.grey.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important;\n color: @greyDown !important;\n}\n.ui.basic.grey.buttons .button:active,\n.ui.basic.grey.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important;\n color: @greyDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.grey.buttons .button,\n.ui.inverted.grey.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important;\n color: @invertedTextColor;\n}\n.ui.inverted.grey.buttons .button:hover,\n.ui.inverted.grey.button:hover,\n.ui.inverted.grey.buttons .button:focus,\n.ui.inverted.grey.button:focus,\n.ui.inverted.grey.buttons .button.active,\n.ui.inverted.grey.button.active,\n.ui.inverted.grey.buttons .button:active,\n.ui.inverted.grey.button:active {\n box-shadow: none !important;\n color: @lightGreyTextColor;\n}\n.ui.inverted.grey.buttons .button:hover,\n.ui.inverted.grey.button:hover {\n background-color: @lightGreyHover;\n}\n.ui.inverted.grey.buttons .button:focus,\n.ui.inverted.grey.button:focus {\n background-color: @lightGreyFocus;\n}\n.ui.inverted.grey.buttons .active.button,\n.ui.inverted.grey.active.button {\n background-color: @lightGreyActive;\n}\n.ui.inverted.grey.buttons .button:active,\n.ui.inverted.grey.button:active {\n background-color: @lightGreyDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.grey.basic.buttons .button,\n.ui.inverted.grey.buttons .basic.button,\n.ui.inverted.grey.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:hover,\n.ui.inverted.grey.buttons .basic.button:hover,\n.ui.inverted.grey.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:focus,\n.ui.inverted.grey.basic.buttons .button:focus,\n.ui.inverted.grey.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important;\n color: @lightGrey !important;\n}\n.ui.inverted.grey.basic.buttons .active.button,\n.ui.inverted.grey.buttons .basic.active.button,\n.ui.inverted.grey.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important;\n color: @white !important;\n}\n.ui.inverted.grey.basic.buttons .button:active,\n.ui.inverted.grey.buttons .basic.button:active,\n.ui.inverted.grey.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important;\n color: @white !important;\n}\n\n\n/*--- Brown ---*/\n.ui.brown.buttons .button,\n.ui.brown.button {\n background-color: @brown;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.brown.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.brown.buttons .button:hover,\n.ui.brown.button:hover {\n background-color: @brownHover;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .button:focus,\n.ui.brown.button:focus {\n background-color: @brownFocus;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .button:active,\n.ui.brown.button:active {\n background-color: @brownDown;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n.ui.brown.buttons .active.button,\n.ui.brown.buttons .active.button:active,\n.ui.brown.active.button,\n.ui.brown.button .active.button:active {\n background-color: @brownActive;\n color: @brownTextColor;\n text-shadow: @brownTextShadow;\n}\n\n/* Basic */\n.ui.basic.brown.buttons .button,\n.ui.basic.brown.button {\n box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important;\n color: @brown !important;\n}\n.ui.basic.brown.buttons .button:hover,\n.ui.basic.brown.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important;\n color: @brownHover !important;\n}\n.ui.basic.brown.buttons .button:focus,\n.ui.basic.brown.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important;\n color: @brownHover !important;\n}\n.ui.basic.brown.buttons .active.button,\n.ui.basic.brown.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important;\n color: @brownDown !important;\n}\n.ui.basic.brown.buttons .button:active,\n.ui.basic.brown.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important;\n color: @brownDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.brown.buttons .button,\n.ui.inverted.brown.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important;\n color: @lightBrown;\n}\n.ui.inverted.brown.buttons .button:hover,\n.ui.inverted.brown.button:hover,\n.ui.inverted.brown.buttons .button:focus,\n.ui.inverted.brown.button:focus,\n.ui.inverted.brown.buttons .button.active,\n.ui.inverted.brown.button.active,\n.ui.inverted.brown.buttons .button:active,\n.ui.inverted.brown.button:active {\n box-shadow: none !important;\n color: @lightBrownTextColor;\n}\n.ui.inverted.brown.buttons .button:hover,\n.ui.inverted.brown.button:hover {\n background-color: @lightBrownHover;\n}\n.ui.inverted.brown.buttons .button:focus,\n.ui.inverted.brown.button:focus {\n background-color: @lightBrownFocus;\n}\n.ui.inverted.brown.buttons .active.button,\n.ui.inverted.brown.active.button {\n background-color: @lightBrownActive;\n}\n.ui.inverted.brown.buttons .button:active,\n.ui.inverted.brown.button:active {\n background-color: @lightBrownDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.brown.basic.buttons .button,\n.ui.inverted.brown.buttons .basic.button,\n.ui.inverted.brown.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.brown.basic.buttons .button:hover,\n.ui.inverted.brown.buttons .basic.button:hover,\n.ui.inverted.brown.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .button:focus,\n.ui.inverted.brown.basic.buttons .button:focus,\n.ui.inverted.brown.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .active.button,\n.ui.inverted.brown.buttons .basic.active.button,\n.ui.inverted.brown.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important;\n color: @lightBrown !important;\n}\n.ui.inverted.brown.basic.buttons .button:active,\n.ui.inverted.brown.buttons .basic.button:active,\n.ui.inverted.brown.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important;\n color: @lightBrown !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.buttons .button,\n.ui.blue.button {\n background-color: @blue;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.blue.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.blue.buttons .button:hover,\n.ui.blue.button:hover {\n background-color: @blueHover;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .button:focus,\n.ui.blue.button:focus {\n background-color: @blueFocus;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .button:active,\n.ui.blue.button:active {\n background-color: @blueDown;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n.ui.blue.buttons .active.button,\n.ui.blue.buttons .active.button:active,\n.ui.blue.active.button,\n.ui.blue.button .active.button:active {\n background-color: @blueActive;\n color: @blueTextColor;\n text-shadow: @blueTextShadow;\n}\n\n/* Basic */\n.ui.basic.blue.buttons .button,\n.ui.basic.blue.button {\n box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important;\n color: @blue !important;\n}\n.ui.basic.blue.buttons .button:hover,\n.ui.basic.blue.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important;\n color: @blueHover !important;\n}\n.ui.basic.blue.buttons .button:focus,\n.ui.basic.blue.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important;\n color: @blueHover !important;\n}\n.ui.basic.blue.buttons .active.button,\n.ui.basic.blue.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important;\n color: @blueDown !important;\n}\n.ui.basic.blue.buttons .button:active,\n.ui.basic.blue.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important;\n color: @blueDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.blue.buttons .button,\n.ui.inverted.blue.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important;\n color: @lightBlue;\n}\n.ui.inverted.blue.buttons .button:hover,\n.ui.inverted.blue.button:hover,\n.ui.inverted.blue.buttons .button:focus,\n.ui.inverted.blue.button:focus,\n.ui.inverted.blue.buttons .button.active,\n.ui.inverted.blue.button.active,\n.ui.inverted.blue.buttons .button:active,\n.ui.inverted.blue.button:active {\n box-shadow: none !important;\n color: @lightBlueTextColor;\n}\n.ui.inverted.blue.buttons .button:hover,\n.ui.inverted.blue.button:hover {\n background-color: @lightBlueHover;\n}\n.ui.inverted.blue.buttons .button:focus,\n.ui.inverted.blue.button:focus {\n background-color: @lightBlueFocus;\n}\n.ui.inverted.blue.buttons .active.button,\n.ui.inverted.blue.active.button {\n background-color: @lightBlueActive;\n}\n.ui.inverted.blue.buttons .button:active,\n.ui.inverted.blue.button:active {\n background-color: @lightBlueDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.blue.basic.buttons .button,\n.ui.inverted.blue.buttons .basic.button,\n.ui.inverted.blue.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.blue.basic.buttons .button:hover,\n.ui.inverted.blue.buttons .basic.button:hover,\n.ui.inverted.blue.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .button:focus,\n.ui.inverted.blue.basic.buttons .button:focus,\n.ui.inverted.blue.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .active.button,\n.ui.inverted.blue.buttons .basic.active.button,\n.ui.inverted.blue.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important;\n color: @lightBlue !important;\n}\n.ui.inverted.blue.basic.buttons .button:active,\n.ui.inverted.blue.buttons .basic.button:active,\n.ui.inverted.blue.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important;\n color: @lightBlue !important;\n}\n\n/*--- Green ---*/\n.ui.green.buttons .button,\n.ui.green.button {\n background-color: @green;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.green.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.green.buttons .button:hover,\n.ui.green.button:hover {\n background-color: @greenHover;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .button:focus,\n.ui.green.button:focus {\n background-color: @greenFocus;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .button:active,\n.ui.green.button:active {\n background-color: @greenDown;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n.ui.green.buttons .active.button,\n.ui.green.buttons .active.button:active,\n.ui.green.active.button,\n.ui.green.button .active.button:active {\n background-color: @greenActive;\n color: @greenTextColor;\n text-shadow: @greenTextShadow;\n}\n\n\n/* Basic */\n.ui.basic.green.buttons .button,\n.ui.basic.green.button {\n box-shadow: 0px 0px 0px @basicBorderSize @green inset !important;\n color: @green !important;\n}\n.ui.basic.green.buttons .button:hover,\n.ui.basic.green.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important;\n color: @greenHover !important;\n}\n.ui.basic.green.buttons .button:focus,\n.ui.basic.green.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important;\n color: @greenHover !important;\n}\n.ui.basic.green.buttons .active.button,\n.ui.basic.green.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important;\n color: @greenDown !important;\n}\n.ui.basic.green.buttons .button:active,\n.ui.basic.green.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important;\n color: @greenDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.green.buttons .button,\n.ui.inverted.green.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important;\n color: @lightGreen;\n}\n.ui.inverted.green.buttons .button:hover,\n.ui.inverted.green.button:hover,\n.ui.inverted.green.buttons .button:focus,\n.ui.inverted.green.button:focus,\n.ui.inverted.green.buttons .button.active,\n.ui.inverted.green.button.active,\n.ui.inverted.green.buttons .button:active,\n.ui.inverted.green.button:active {\n box-shadow: none !important;\n color: @greenTextColor;\n}\n.ui.inverted.green.buttons .button:hover,\n.ui.inverted.green.button:hover {\n background-color: @lightGreenHover;\n}\n.ui.inverted.green.buttons .button:focus,\n.ui.inverted.green.button:focus {\n background-color: @lightGreenFocus;\n}\n.ui.inverted.green.buttons .active.button,\n.ui.inverted.green.active.button {\n background-color: @lightGreenActive;\n}\n.ui.inverted.green.buttons .button:active,\n.ui.inverted.green.button:active {\n background-color: @lightGreenDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.green.basic.buttons .button,\n.ui.inverted.green.buttons .basic.button,\n.ui.inverted.green.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.green.basic.buttons .button:hover,\n.ui.inverted.green.buttons .basic.button:hover,\n.ui.inverted.green.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .button:focus,\n.ui.inverted.green.basic.buttons .button:focus,\n.ui.inverted.green.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .active.button,\n.ui.inverted.green.buttons .basic.active.button,\n.ui.inverted.green.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important;\n color: @lightGreen !important;\n}\n.ui.inverted.green.basic.buttons .button:active,\n.ui.inverted.green.buttons .basic.button:active,\n.ui.inverted.green.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important;\n color: @lightGreen !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.buttons .button,\n.ui.orange.button {\n background-color: @orange;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.orange.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.orange.buttons .button:hover,\n.ui.orange.button:hover {\n background-color: @orangeHover;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .button:focus,\n.ui.orange.button:focus {\n background-color: @orangeFocus;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .button:active,\n.ui.orange.button:active {\n background-color: @orangeDown;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n.ui.orange.buttons .active.button,\n.ui.orange.buttons .active.button:active,\n.ui.orange.active.button,\n.ui.orange.button .active.button:active {\n background-color: @orangeActive;\n color: @orangeTextColor;\n text-shadow: @orangeTextShadow;\n}\n\n/* Basic */\n.ui.basic.orange.buttons .button,\n.ui.basic.orange.button {\n box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important;\n color: @orange !important;\n}\n.ui.basic.orange.buttons .button:hover,\n.ui.basic.orange.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important;\n color: @orangeHover !important;\n}\n.ui.basic.orange.buttons .button:focus,\n.ui.basic.orange.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important;\n color: @orangeHover !important;\n}\n.ui.basic.orange.buttons .active.button,\n.ui.basic.orange.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important;\n color: @orangeDown !important;\n}\n.ui.basic.orange.buttons .button:active,\n.ui.basic.orange.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important;\n color: @orangeDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.orange.buttons .button,\n.ui.inverted.orange.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important;\n color: @lightOrange;\n}\n.ui.inverted.orange.buttons .button:hover,\n.ui.inverted.orange.button:hover,\n.ui.inverted.orange.buttons .button:focus,\n.ui.inverted.orange.button:focus,\n.ui.inverted.orange.buttons .button.active,\n.ui.inverted.orange.button.active,\n.ui.inverted.orange.buttons .button:active,\n.ui.inverted.orange.button:active {\n box-shadow: none !important;\n color: @lightOrangeTextColor;\n}\n.ui.inverted.orange.buttons .button:hover,\n.ui.inverted.orange.button:hover {\n background-color: @lightOrangeHover;\n}\n.ui.inverted.orange.buttons .button:focus,\n.ui.inverted.orange.button:focus {\n background-color: @lightOrangeFocus;\n}\n.ui.inverted.orange.buttons .active.button,\n.ui.inverted.orange.active.button {\n background-color: @lightOrangeActive;\n}\n.ui.inverted.orange.buttons .button:active,\n.ui.inverted.orange.button:active {\n background-color: @lightOrangeDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.orange.basic.buttons .button,\n.ui.inverted.orange.buttons .basic.button,\n.ui.inverted.orange.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.orange.basic.buttons .button:hover,\n.ui.inverted.orange.buttons .basic.button:hover,\n.ui.inverted.orange.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .button:focus,\n.ui.inverted.orange.basic.buttons .button:focus,\n.ui.inverted.orange.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .active.button,\n.ui.inverted.orange.buttons .basic.active.button,\n.ui.inverted.orange.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important;\n color: @lightOrange !important;\n}\n.ui.inverted.orange.basic.buttons .button:active,\n.ui.inverted.orange.buttons .basic.button:active,\n.ui.inverted.orange.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important;\n color: @lightOrange !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.buttons .button,\n.ui.pink.button {\n background-color: @pink;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.pink.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.pink.buttons .button:hover,\n.ui.pink.button:hover {\n background-color: @pinkHover;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .button:focus,\n.ui.pink.button:focus {\n background-color: @pinkFocus;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .button:active,\n.ui.pink.button:active {\n background-color: @pinkDown;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n.ui.pink.buttons .active.button,\n.ui.pink.buttons .active.button:active,\n.ui.pink.active.button,\n.ui.pink.button .active.button:active {\n background-color: @pinkActive;\n color: @pinkTextColor;\n text-shadow: @pinkTextShadow;\n}\n\n/* Basic */\n.ui.basic.pink.buttons .button,\n.ui.basic.pink.button {\n box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important;\n color: @pink !important;\n}\n.ui.basic.pink.buttons .button:hover,\n.ui.basic.pink.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important;\n color: @pinkHover !important;\n}\n.ui.basic.pink.buttons .button:focus,\n.ui.basic.pink.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important;\n color: @pinkHover !important;\n}\n.ui.basic.pink.buttons .active.button,\n.ui.basic.pink.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important;\n color: @pinkDown !important;\n}\n.ui.basic.pink.buttons .button:active,\n.ui.basic.pink.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important;\n color: @pinkDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.pink.buttons .button,\n.ui.inverted.pink.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important;\n color: @lightPink;\n}\n.ui.inverted.pink.buttons .button:hover,\n.ui.inverted.pink.button:hover,\n.ui.inverted.pink.buttons .button:focus,\n.ui.inverted.pink.button:focus,\n.ui.inverted.pink.buttons .button.active,\n.ui.inverted.pink.button.active,\n.ui.inverted.pink.buttons .button:active,\n.ui.inverted.pink.button:active {\n box-shadow: none !important;\n color: @lightPinkTextColor;\n}\n.ui.inverted.pink.buttons .button:hover,\n.ui.inverted.pink.button:hover {\n background-color: @lightPinkHover;\n}\n.ui.inverted.pink.buttons .button:focus,\n.ui.inverted.pink.button:focus {\n background-color: @lightPinkFocus;\n}\n.ui.inverted.pink.buttons .active.button,\n.ui.inverted.pink.active.button {\n background-color: @lightPinkActive;\n}\n.ui.inverted.pink.buttons .button:active,\n.ui.inverted.pink.button:active {\n background-color: @lightPinkDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.pink.basic.buttons .button,\n.ui.inverted.pink.buttons .basic.button,\n.ui.inverted.pink.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.pink.basic.buttons .button:hover,\n.ui.inverted.pink.buttons .basic.button:hover,\n.ui.inverted.pink.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .button:focus,\n.ui.inverted.pink.basic.buttons .button:focus,\n.ui.inverted.pink.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .active.button,\n.ui.inverted.pink.buttons .basic.active.button,\n.ui.inverted.pink.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important;\n color: @lightPink !important;\n}\n.ui.inverted.pink.basic.buttons .button:active,\n.ui.inverted.pink.buttons .basic.button:active,\n.ui.inverted.pink.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important;\n color: @lightPink !important;\n}\n\n\n/*--- Violet ---*/\n.ui.violet.buttons .button,\n.ui.violet.button {\n background-color: @violet;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.violet.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.violet.buttons .button:hover,\n.ui.violet.button:hover {\n background-color: @violetHover;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .button:focus,\n.ui.violet.button:focus {\n background-color: @violetFocus;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .button:active,\n.ui.violet.button:active {\n background-color: @violetDown;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n.ui.violet.buttons .active.button,\n.ui.violet.buttons .active.button:active,\n.ui.violet.active.button,\n.ui.violet.button .active.button:active {\n background-color: @violetActive;\n color: @violetTextColor;\n text-shadow: @violetTextShadow;\n}\n\n/* Basic */\n.ui.basic.violet.buttons .button,\n.ui.basic.violet.button {\n box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important;\n color: @violet !important;\n}\n.ui.basic.violet.buttons .button:hover,\n.ui.basic.violet.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important;\n color: @violetHover !important;\n}\n.ui.basic.violet.buttons .button:focus,\n.ui.basic.violet.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important;\n color: @violetHover !important;\n}\n.ui.basic.violet.buttons .active.button,\n.ui.basic.violet.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important;\n color: @violetDown !important;\n}\n.ui.basic.violet.buttons .button:active,\n.ui.basic.violet.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important;\n color: @violetDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.violet.buttons .button,\n.ui.inverted.violet.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important;\n color: @lightViolet;\n}\n.ui.inverted.violet.buttons .button:hover,\n.ui.inverted.violet.button:hover,\n.ui.inverted.violet.buttons .button:focus,\n.ui.inverted.violet.button:focus,\n.ui.inverted.violet.buttons .button.active,\n.ui.inverted.violet.button.active,\n.ui.inverted.violet.buttons .button:active,\n.ui.inverted.violet.button:active {\n box-shadow: none !important;\n color: @lightVioletTextColor;\n}\n.ui.inverted.violet.buttons .button:hover,\n.ui.inverted.violet.button:hover {\n background-color: @lightVioletHover;\n}\n.ui.inverted.violet.buttons .button:focus,\n.ui.inverted.violet.button:focus {\n background-color: @lightVioletFocus;\n}\n.ui.inverted.violet.buttons .active.button,\n.ui.inverted.violet.active.button {\n background-color: @lightVioletActive;\n}\n.ui.inverted.violet.buttons .button:active,\n.ui.inverted.violet.button:active {\n background-color: @lightVioletDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.violet.basic.buttons .button,\n.ui.inverted.violet.buttons .basic.button,\n.ui.inverted.violet.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.violet.basic.buttons .button:hover,\n.ui.inverted.violet.buttons .basic.button:hover,\n.ui.inverted.violet.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .button:focus,\n.ui.inverted.violet.basic.buttons .button:focus,\n.ui.inverted.violet.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .active.button,\n.ui.inverted.violet.buttons .basic.active.button,\n.ui.inverted.violet.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important;\n color: @lightViolet !important;\n}\n.ui.inverted.violet.basic.buttons .button:active,\n.ui.inverted.violet.buttons .basic.button:active,\n.ui.inverted.violet.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important;\n color: @lightViolet !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.buttons .button,\n.ui.purple.button {\n background-color: @purple;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.purple.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.purple.buttons .button:hover,\n.ui.purple.button:hover {\n background-color: @purpleHover;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .button:focus,\n.ui.purple.button:focus {\n background-color: @purpleFocus;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .button:active,\n.ui.purple.button:active {\n background-color: @purpleDown;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n.ui.purple.buttons .active.button,\n.ui.purple.buttons .active.button:active,\n.ui.purple.active.button,\n.ui.purple.button .active.button:active {\n background-color: @purpleActive;\n color: @purpleTextColor;\n text-shadow: @purpleTextShadow;\n}\n\n/* Basic */\n.ui.basic.purple.buttons .button,\n.ui.basic.purple.button {\n box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important;\n color: @purple !important;\n}\n.ui.basic.purple.buttons .button:hover,\n.ui.basic.purple.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important;\n color: @purpleHover !important;\n}\n.ui.basic.purple.buttons .button:focus,\n.ui.basic.purple.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important;\n color: @purpleHover !important;\n}\n.ui.basic.purple.buttons .active.button,\n.ui.basic.purple.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important;\n color: @purpleDown !important;\n}\n.ui.basic.purple.buttons .button:active,\n.ui.basic.purple.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important;\n color: @purpleDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.purple.buttons .button,\n.ui.inverted.purple.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important;\n color: @lightPurple;\n}\n.ui.inverted.purple.buttons .button:hover,\n.ui.inverted.purple.button:hover,\n.ui.inverted.purple.buttons .button:focus,\n.ui.inverted.purple.button:focus,\n.ui.inverted.purple.buttons .button.active,\n.ui.inverted.purple.button.active,\n.ui.inverted.purple.buttons .button:active,\n.ui.inverted.purple.button:active {\n box-shadow: none !important;\n color: @lightPurpleTextColor;\n}\n.ui.inverted.purple.buttons .button:hover,\n.ui.inverted.purple.button:hover {\n background-color: @lightPurpleHover;\n}\n.ui.inverted.purple.buttons .button:focus,\n.ui.inverted.purple.button:focus {\n background-color: @lightPurpleFocus;\n}\n.ui.inverted.purple.buttons .active.button,\n.ui.inverted.purple.active.button {\n background-color: @lightPurpleActive;\n}\n.ui.inverted.purple.buttons .button:active,\n.ui.inverted.purple.button:active {\n background-color: @lightPurpleDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.purple.basic.buttons .button,\n.ui.inverted.purple.buttons .basic.button,\n.ui.inverted.purple.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.purple.basic.buttons .button:hover,\n.ui.inverted.purple.buttons .basic.button:hover,\n.ui.inverted.purple.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .button:focus,\n.ui.inverted.purple.basic.buttons .button:focus,\n.ui.inverted.purple.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .active.button,\n.ui.inverted.purple.buttons .basic.active.button,\n.ui.inverted.purple.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important;\n color: @lightPurple !important;\n}\n.ui.inverted.purple.basic.buttons .button:active,\n.ui.inverted.purple.buttons .basic.button:active,\n.ui.inverted.purple.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important;\n color: @lightPurple !important;\n}\n\n/*--- Red ---*/\n.ui.red.buttons .button,\n.ui.red.button {\n background-color: @red;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.red.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.red.buttons .button:hover,\n.ui.red.button:hover {\n background-color: @redHover;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .button:focus,\n.ui.red.button:focus {\n background-color: @redFocus;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .button:active,\n.ui.red.button:active {\n background-color: @redDown;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n.ui.red.buttons .active.button,\n.ui.red.buttons .active.button:active,\n.ui.red.active.button,\n.ui.red.button .active.button:active {\n background-color: @redActive;\n color: @redTextColor;\n text-shadow: @redTextShadow;\n}\n\n/* Basic */\n.ui.basic.red.buttons .button,\n.ui.basic.red.button {\n box-shadow: 0px 0px 0px @basicBorderSize @red inset !important;\n color: @red !important;\n}\n.ui.basic.red.buttons .button:hover,\n.ui.basic.red.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important;\n color: @redHover !important;\n}\n.ui.basic.red.buttons .button:focus,\n.ui.basic.red.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important;\n color: @redHover !important;\n}\n.ui.basic.red.buttons .active.button,\n.ui.basic.red.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important;\n color: @redDown !important;\n}\n.ui.basic.red.buttons .button:active,\n.ui.basic.red.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important;\n color: @redDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.red.buttons .button,\n.ui.inverted.red.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important;\n color: @lightRed;\n}\n.ui.inverted.red.buttons .button:hover,\n.ui.inverted.red.button:hover,\n.ui.inverted.red.buttons .button:focus,\n.ui.inverted.red.button:focus,\n.ui.inverted.red.buttons .button.active,\n.ui.inverted.red.button.active,\n.ui.inverted.red.buttons .button:active,\n.ui.inverted.red.button:active {\n box-shadow: none !important;\n color: @lightRedTextColor;\n}\n.ui.inverted.red.buttons .button:hover,\n.ui.inverted.red.button:hover {\n background-color: @lightRedHover;\n}\n.ui.inverted.red.buttons .button:focus,\n.ui.inverted.red.button:focus {\n background-color: @lightRedFocus;\n}\n.ui.inverted.red.buttons .active.button,\n.ui.inverted.red.active.button {\n background-color: @lightRedActive;\n}\n.ui.inverted.red.buttons .button:active,\n.ui.inverted.red.button:active {\n background-color: @lightRedDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.red.basic.buttons .button,\n.ui.inverted.red.buttons .basic.button,\n.ui.inverted.red.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.red.basic.buttons .button:hover,\n.ui.inverted.red.buttons .basic.button:hover,\n.ui.inverted.red.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .button:focus,\n.ui.inverted.red.basic.buttons .button:focus,\n.ui.inverted.red.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .active.button,\n.ui.inverted.red.buttons .basic.active.button,\n.ui.inverted.red.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important;\n color: @lightRed !important;\n}\n.ui.inverted.red.basic.buttons .button:active,\n.ui.inverted.red.buttons .basic.button:active,\n.ui.inverted.red.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important;\n color: @lightRed !important;\n}\n\n\n/*--- Teal ---*/\n.ui.teal.buttons .button,\n.ui.teal.button {\n background-color: @teal;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.teal.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.teal.buttons .button:hover,\n.ui.teal.button:hover {\n background-color: @tealHover;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .button:focus,\n.ui.teal.button:focus {\n background-color: @tealFocus;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .button:active,\n.ui.teal.button:active {\n background-color: @tealDown;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n.ui.teal.buttons .active.button,\n.ui.teal.buttons .active.button:active,\n.ui.teal.active.button,\n.ui.teal.button .active.button:active {\n background-color: @tealActive;\n color: @tealTextColor;\n text-shadow: @tealTextShadow;\n}\n\n/* Basic */\n.ui.basic.teal.buttons .button,\n.ui.basic.teal.button {\n box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important;\n color: @teal !important;\n}\n.ui.basic.teal.buttons .button:hover,\n.ui.basic.teal.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important;\n color: @tealHover !important;\n}\n.ui.basic.teal.buttons .button:focus,\n.ui.basic.teal.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important;\n color: @tealHover !important;\n}\n.ui.basic.teal.buttons .active.button,\n.ui.basic.teal.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important;\n color: @tealDown !important;\n}\n.ui.basic.teal.buttons .button:active,\n.ui.basic.teal.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important;\n color: @tealDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.teal.buttons .button,\n.ui.inverted.teal.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important;\n color: @lightTeal;\n}\n.ui.inverted.teal.buttons .button:hover,\n.ui.inverted.teal.button:hover,\n.ui.inverted.teal.buttons .button:focus,\n.ui.inverted.teal.button:focus,\n.ui.inverted.teal.buttons .button.active,\n.ui.inverted.teal.button.active,\n.ui.inverted.teal.buttons .button:active,\n.ui.inverted.teal.button:active {\n box-shadow: none !important;\n color: @lightTealTextColor;\n}\n.ui.inverted.teal.buttons .button:hover,\n.ui.inverted.teal.button:hover {\n background-color: @lightTealHover;\n}\n.ui.inverted.teal.buttons .button:focus,\n.ui.inverted.teal.button:focus {\n background-color: @lightTealFocus;\n}\n.ui.inverted.teal.buttons .active.button,\n.ui.inverted.teal.active.button {\n background-color: @lightTealActive;\n}\n.ui.inverted.teal.buttons .button:active,\n.ui.inverted.teal.button:active {\n background-color: @lightTealDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.teal.basic.buttons .button,\n.ui.inverted.teal.buttons .basic.button,\n.ui.inverted.teal.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.teal.basic.buttons .button:hover,\n.ui.inverted.teal.buttons .basic.button:hover,\n.ui.inverted.teal.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .button:focus,\n.ui.inverted.teal.basic.buttons .button:focus,\n.ui.inverted.teal.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .active.button,\n.ui.inverted.teal.buttons .basic.active.button,\n.ui.inverted.teal.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important;\n color: @lightTeal !important;\n}\n.ui.inverted.teal.basic.buttons .button:active,\n.ui.inverted.teal.buttons .basic.button:active,\n.ui.inverted.teal.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important;\n color: @lightTeal !important;\n}\n\n\n/*--- Olive ---*/\n.ui.olive.buttons .button,\n.ui.olive.button {\n background-color: @olive;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.olive.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.olive.buttons .button:hover,\n.ui.olive.button:hover {\n background-color: @oliveHover;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .button:focus,\n.ui.olive.button:focus {\n background-color: @oliveFocus;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .button:active,\n.ui.olive.button:active {\n background-color: @oliveDown;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n.ui.olive.buttons .active.button,\n.ui.olive.buttons .active.button:active,\n.ui.olive.active.button,\n.ui.olive.button .active.button:active {\n background-color: @oliveActive;\n color: @oliveTextColor;\n text-shadow: @oliveTextShadow;\n}\n\n/* Basic */\n.ui.basic.olive.buttons .button,\n.ui.basic.olive.button {\n box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important;\n color: @olive !important;\n}\n.ui.basic.olive.buttons .button:hover,\n.ui.basic.olive.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important;\n color: @oliveHover !important;\n}\n.ui.basic.olive.buttons .button:focus,\n.ui.basic.olive.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important;\n color: @oliveHover !important;\n}\n.ui.basic.olive.buttons .active.button,\n.ui.basic.olive.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important;\n color: @oliveDown !important;\n}\n.ui.basic.olive.buttons .button:active,\n.ui.basic.olive.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important;\n color: @oliveDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.olive.buttons .button,\n.ui.inverted.olive.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important;\n color: @lightOlive;\n}\n.ui.inverted.olive.buttons .button:hover,\n.ui.inverted.olive.button:hover,\n.ui.inverted.olive.buttons .button:focus,\n.ui.inverted.olive.button:focus,\n.ui.inverted.olive.buttons .button.active,\n.ui.inverted.olive.button.active,\n.ui.inverted.olive.buttons .button:active,\n.ui.inverted.olive.button:active {\n box-shadow: none !important;\n color: @lightOliveTextColor;\n}\n.ui.inverted.olive.buttons .button:hover,\n.ui.inverted.olive.button:hover {\n background-color: @lightOliveHover;\n}\n.ui.inverted.olive.buttons .button:focus,\n.ui.inverted.olive.button:focus {\n background-color: @lightOliveFocus;\n}\n.ui.inverted.olive.buttons .active.button,\n.ui.inverted.olive.active.button {\n background-color: @lightOliveActive;\n}\n.ui.inverted.olive.buttons .button:active,\n.ui.inverted.olive.button:active {\n background-color: @lightOliveDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.olive.basic.buttons .button,\n.ui.inverted.olive.buttons .basic.button,\n.ui.inverted.olive.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.olive.basic.buttons .button:hover,\n.ui.inverted.olive.buttons .basic.button:hover,\n.ui.inverted.olive.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .button:focus,\n.ui.inverted.olive.basic.buttons .button:focus,\n.ui.inverted.olive.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .active.button,\n.ui.inverted.olive.buttons .basic.active.button,\n.ui.inverted.olive.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important;\n color: @lightOlive !important;\n}\n.ui.inverted.olive.basic.buttons .button:active,\n.ui.inverted.olive.buttons .basic.button:active,\n.ui.inverted.olive.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important;\n color: @lightOlive !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.buttons .button,\n.ui.yellow.button {\n background-color: @yellow;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.yellow.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.yellow.buttons .button:hover,\n.ui.yellow.button:hover {\n background-color: @yellowHover;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .button:focus,\n.ui.yellow.button:focus {\n background-color: @yellowFocus;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .button:active,\n.ui.yellow.button:active {\n background-color: @yellowDown;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n.ui.yellow.buttons .active.button,\n.ui.yellow.buttons .active.button:active,\n.ui.yellow.active.button,\n.ui.yellow.button .active.button:active {\n background-color: @yellowActive;\n color: @yellowTextColor;\n text-shadow: @yellowTextShadow;\n}\n\n/* Basic */\n.ui.basic.yellow.buttons .button,\n.ui.basic.yellow.button {\n box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important;\n color: @yellow !important;\n}\n.ui.basic.yellow.buttons .button:hover,\n.ui.basic.yellow.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important;\n color: @yellowHover !important;\n}\n.ui.basic.yellow.buttons .button:focus,\n.ui.basic.yellow.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important;\n color: @yellowHover !important;\n}\n.ui.basic.yellow.buttons .active.button,\n.ui.basic.yellow.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important;\n color: @yellowDown !important;\n}\n.ui.basic.yellow.buttons .button:active,\n.ui.basic.yellow.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important;\n color: @yellowDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/* Inverted */\n.ui.inverted.yellow.buttons .button,\n.ui.inverted.yellow.button {\n background-color: transparent;\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important;\n color: @lightYellow;\n}\n.ui.inverted.yellow.buttons .button:hover,\n.ui.inverted.yellow.button:hover,\n.ui.inverted.yellow.buttons .button:focus,\n.ui.inverted.yellow.button:focus,\n.ui.inverted.yellow.buttons .button.active,\n.ui.inverted.yellow.button.active,\n.ui.inverted.yellow.buttons .button:active,\n.ui.inverted.yellow.button:active {\n box-shadow: none !important;\n color: @lightYellowTextColor;\n}\n.ui.inverted.yellow.buttons .button:hover,\n.ui.inverted.yellow.button:hover {\n background-color: @lightYellowHover;\n}\n.ui.inverted.yellow.buttons .button:focus,\n.ui.inverted.yellow.button:focus {\n background-color: @lightYellowFocus;\n}\n.ui.inverted.yellow.buttons .active.button,\n.ui.inverted.yellow.active.button {\n background-color: @lightYellowActive;\n}\n.ui.inverted.yellow.buttons .button:active,\n.ui.inverted.yellow.button:active {\n background-color: @lightYellowDown;\n}\n\n/* Inverted Basic */\n.ui.inverted.yellow.basic.buttons .button,\n.ui.inverted.yellow.buttons .basic.button,\n.ui.inverted.yellow.basic.button {\n background-color: transparent;\n box-shadow: @basicInvertedBoxShadow !important;\n color: @white !important;\n}\n.ui.inverted.yellow.basic.buttons .button:hover,\n.ui.inverted.yellow.buttons .basic.button:hover,\n.ui.inverted.yellow.basic.button:hover {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .button:focus,\n.ui.inverted.yellow.basic.buttons .button:focus,\n.ui.inverted.yellow.basic.button:focus {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .active.button,\n.ui.inverted.yellow.buttons .basic.active.button,\n.ui.inverted.yellow.basic.active.button {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important;\n color: @lightYellow !important;\n}\n.ui.inverted.yellow.basic.buttons .button:active,\n.ui.inverted.yellow.buttons .basic.button:active,\n.ui.inverted.yellow.basic.button:active {\n box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important;\n color: @lightYellow !important;\n}\n\n\n/*-------------------\n Primary\n--------------------*/\n\n/*--- Standard ---*/\n.ui.primary.buttons .button,\n.ui.primary.button {\n background-color: @primaryColor;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.primary.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.primary.buttons .button:hover,\n.ui.primary.button:hover {\n background-color: @primaryColorHover;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .button:focus,\n.ui.primary.button:focus {\n background-color: @primaryColorFocus;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .button:active,\n.ui.primary.button:active {\n background-color: @primaryColorDown;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n.ui.primary.buttons .active.button,\n.ui.primary.buttons .active.button:active,\n.ui.primary.active.button,\n.ui.primary.button .active.button:active {\n background-color: @primaryColorActive;\n color: @primaryTextColor;\n text-shadow: @primaryTextShadow;\n}\n\n/* Basic */\n.ui.basic.primary.buttons .button,\n.ui.basic.primary.button {\n box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important;\n color: @primaryColor !important;\n}\n.ui.basic.primary.buttons .button:hover,\n.ui.basic.primary.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important;\n color: @primaryColorHover !important;\n}\n.ui.basic.primary.buttons .button:focus,\n.ui.basic.primary.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important;\n color: @primaryColorHover !important;\n}\n.ui.basic.primary.buttons .active.button,\n.ui.basic.primary.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important;\n color: @primaryColorDown !important;\n}\n.ui.basic.primary.buttons .button:active,\n.ui.basic.primary.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important;\n color: @primaryColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*-------------------\n Secondary\n--------------------*/\n\n/* Standard */\n.ui.secondary.buttons .button,\n.ui.secondary.button {\n background-color: @secondaryColor;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.secondary.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.secondary.buttons .button:hover,\n.ui.secondary.button:hover {\n background-color: @secondaryColorHover;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .button:focus,\n.ui.secondary.button:focus {\n background-color: @secondaryColorFocus;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .button:active,\n.ui.secondary.button:active {\n background-color: @secondaryColorDown;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n.ui.secondary.buttons .active.button,\n.ui.secondary.buttons .active.button:active,\n.ui.secondary.active.button,\n.ui.secondary.button .active.button:active {\n background-color: @secondaryColorActive;\n color: @secondaryTextColor;\n text-shadow: @secondaryTextShadow;\n}\n\n/* Basic */\n.ui.basic.secondary.buttons .button,\n.ui.basic.secondary.button {\n box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important;\n color: @secondaryColor !important;\n}\n.ui.basic.secondary.buttons .button:hover,\n.ui.basic.secondary.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important;\n color: @secondaryColorHover !important;\n}\n.ui.basic.secondary.buttons .button:focus,\n.ui.basic.secondary.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important;\n color: @secondaryColorHover !important;\n}\n.ui.basic.secondary.buttons .active.button,\n.ui.basic.secondary.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important;\n color: @secondaryColorDown !important;\n}\n.ui.basic.secondary.buttons .button:active,\n.ui.basic.secondary.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important;\n color: @secondaryColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*---------------\n Positive\n----------------*/\n\n/* Standard */\n.ui.positive.buttons .button,\n.ui.positive.button {\n background-color: @positiveColor;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.positive.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.positive.buttons .button:hover,\n.ui.positive.button:hover {\n background-color: @positiveColorHover;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .button:focus,\n.ui.positive.button:focus {\n background-color: @positiveColorFocus;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .button:active,\n.ui.positive.button:active {\n background-color: @positiveColorDown;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n.ui.positive.buttons .active.button,\n.ui.positive.buttons .active.button:active,\n.ui.positive.active.button,\n.ui.positive.button .active.button:active {\n background-color: @positiveColorActive;\n color: @positiveTextColor;\n text-shadow: @positiveTextShadow;\n}\n\n/* Basic */\n.ui.basic.positive.buttons .button,\n.ui.basic.positive.button {\n box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important;\n color: @positiveColor !important;\n}\n.ui.basic.positive.buttons .button:hover,\n.ui.basic.positive.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important;\n color: @positiveColorHover !important;\n}\n.ui.basic.positive.buttons .button:focus,\n.ui.basic.positive.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important;\n color: @positiveColorHover !important;\n}\n.ui.basic.positive.buttons .active.button,\n.ui.basic.positive.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important;\n color: @positiveColorDown !important;\n}\n.ui.basic.positive.buttons .button:active,\n.ui.basic.positive.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important;\n color: @positiveColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*---------------\n Negative\n----------------*/\n\n/* Standard */\n.ui.negative.buttons .button,\n.ui.negative.button {\n background-color: @negativeColor;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n background-image: @coloredBackgroundImage;\n}\n.ui.negative.button {\n box-shadow: @coloredBoxShadow;\n}\n.ui.negative.buttons .button:hover,\n.ui.negative.button:hover {\n background-color: @negativeColorHover;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .button:focus,\n.ui.negative.button:focus {\n background-color: @negativeColorFocus;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .button:active,\n.ui.negative.button:active {\n background-color: @negativeColorDown;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n.ui.negative.buttons .active.button,\n.ui.negative.buttons .active.button:active,\n.ui.negative.active.button,\n.ui.negative.button .active.button:active {\n background-color: @negativeColorActive;\n color: @negativeTextColor;\n text-shadow: @negativeTextShadow;\n}\n\n/* Basic */\n.ui.basic.negative.buttons .button,\n.ui.basic.negative.button {\n box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important;\n color: @negativeColor !important;\n}\n.ui.basic.negative.buttons .button:hover,\n.ui.basic.negative.button:hover {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important;\n color: @negativeColorHover !important;\n}\n.ui.basic.negative.buttons .button:focus,\n.ui.basic.negative.button:focus {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important;\n color: @negativeColorHover !important;\n}\n.ui.basic.negative.buttons .active.button,\n.ui.basic.negative.active.button {\n background: transparent !important;\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important;\n color: @negativeColorDown !important;\n}\n.ui.basic.negative.buttons .button:active,\n.ui.basic.negative.button:active {\n box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important;\n color: @negativeColorDown !important;\n}\n.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {\n margin-left: -@basicColoredBorderSize;\n}\n\n/*******************************\n Groups\n*******************************/\n\n.ui.buttons {\n display: inline-flex;\n flex-direction: row;\n font-size: 0em;\n vertical-align: baseline;\n margin: @verticalMargin @horizontalMargin 0em 0em;\n}\n.ui.buttons:not(.basic):not(.inverted) {\n box-shadow: @groupBoxShadow;\n}\n\n/* Clearfix */\n.ui.buttons:after {\n content: \".\";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n/* Standard Group */\n.ui.buttons .button {\n flex: 1 0 auto;\n margin: 0em;\n border-radius: 0em;\n margin: @groupButtonOffset;\n}\n.ui.buttons > .ui.button:not(.basic):not(.inverted),\n.ui.buttons:not(.basic):not(.inverted) > .button {\n box-shadow: @groupButtonBoxShadow;\n}\n\n.ui.buttons .button:first-child {\n border-left: none;\n margin-left: 0em;\n border-top-left-radius: @borderRadius;\n border-bottom-left-radius: @borderRadius;\n}\n.ui.buttons .button:last-child {\n border-top-right-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n\n/* Vertical Style */\n.ui.vertical.buttons {\n display: inline-flex;\n flex-direction: column;\n}\n.ui.vertical.buttons .button {\n display: block;\n float: none;\n width: 100%;\n margin: @verticalGroupOffset;\n box-shadow: @verticalBoxShadow;\n border-radius: 0em;\n}\n.ui.vertical.buttons .button:first-child {\n border-top-left-radius: @borderRadius;\n border-top-right-radius: @borderRadius;\n}\n.ui.vertical.buttons .button:last-child {\n margin-bottom: 0px;\n border-bottom-left-radius: @borderRadius;\n border-bottom-right-radius: @borderRadius;\n}\n.ui.vertical.buttons .button:only-child {\n border-radius: @borderRadius;\n}\n\n.loadUIOverrides();\n\n" }, { "path": "semantic/src/definitions/elements/container.less", "content": "/*!\n * # Semantic UI - Container\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'container';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Container\n*******************************/\n\n/* All Sizes */\n.ui.container {\n display: block;\n max-width: @maxWidth !important;\n}\n\n/* Mobile */\n@media only screen and (max-width: @largestMobileScreen) {\n .ui.container {\n width: @mobileWidth !important;\n margin-left: @mobileGutter !important;\n margin-right: @mobileGutter !important;\n }\n .ui.grid.container {\n width: @mobileGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @mobileRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @mobileVeryRelaxedGridWidth !important;\n }\n}\n\n/* Tablet */\n@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {\n .ui.container {\n width: @tabletWidth;\n margin-left: @tabletGutter !important;\n margin-right: @tabletGutter !important;\n }\n .ui.grid.container {\n width: @tabletGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @tabletRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @tabletVeryRelaxedGridWidth !important;\n }\n}\n\n/* Small Monitor */\n@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {\n .ui.container {\n width: @computerWidth;\n margin-left: @computerGutter !important;\n margin-right: @computerGutter !important;\n }\n .ui.grid.container {\n width: @computerGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @computerRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @computerVeryRelaxedGridWidth !important;\n }\n}\n\n/* Large Monitor */\n@media only screen and (min-width: @largeMonitorBreakpoint) {\n .ui.container {\n width: @largeMonitorWidth;\n margin-left: @largeMonitorGutter !important;\n margin-right: @largeMonitorGutter !important;\n }\n .ui.grid.container {\n width: @largeMonitorGridWidth !important;\n }\n .ui.relaxed.grid.container {\n width: @largeMonitorRelaxedGridWidth !important;\n }\n .ui.very.relaxed.grid.container {\n width: @largeMonitorVeryRelaxedGridWidth !important;\n }\n}\n\n/*******************************\n Types\n*******************************/\n\n\n/* Text Container */\n.ui.text.container {\n font-family: @textFontFamily;\n max-width: @textWidth !important;\n line-height: @textLineHeight;\n}\n\n.ui.text.container {\n font-size: @textSize;\n}\n\n/* Fluid */\n.ui.fluid.container {\n width: 100%;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n.ui[class*=\"left aligned\"].container {\n text-align: left;\n}\n.ui[class*=\"center aligned\"].container {\n text-align: center;\n}\n.ui[class*=\"right aligned\"].container {\n text-align: right;\n}\n.ui.justified.container {\n text-align: justify;\n hyphens: auto;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/divider.less", "content": "/*!\n * # Semantic UI - Divider\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'divider';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Divider\n*******************************/\n\n.ui.divider {\n margin: @margin;\n\n line-height: 1;\n height: 0em;\n\n font-weight: @fontWeight;\n text-transform: @textTransform;\n letter-spacing: @letterSpacing;\n color: @color;\n\n user-select: none;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n/*--------------\n Basic\n---------------*/\n\n.ui.divider:not(.vertical):not(.horizontal) {\n border-top: @shadowWidth solid @shadowColor;\n border-bottom: @highlightWidth solid @highlightColor;\n}\n\n/*--------------\n Coupling\n---------------*/\n\n/* Allow divider between each column row */\n.ui.grid > .column + .divider,\n.ui.grid > .row > .column + .divider {\n left: auto;\n}\n\n/*--------------\n Horizontal\n---------------*/\n\n.ui.horizontal.divider {\n display: table;\n white-space: nowrap;\n\n height: auto;\n margin: @horizontalMargin;\n line-height: 1;\n text-align: center;\n}\n\n.ui.horizontal.divider:before,\n.ui.horizontal.divider:after {\n content: '';\n display: table-cell;\n position: relative;\n top: 50%;\n width: 50%;\n background-repeat: no-repeat;\n}\n\n.ui.horizontal.divider:before {\n background-position: right @horizontalDividerMargin top 50%;\n}\n.ui.horizontal.divider:after {\n background-position: left @horizontalDividerMargin top 50%;\n}\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.divider {\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 50%;\n\n margin: 0rem;\n padding: 0em;\n width: auto;\n height: 50%;\n\n line-height: 0em;\n text-align: center;\n transform: translateX(-50%);\n}\n\n.ui.vertical.divider:before,\n.ui.vertical.divider:after {\n position: absolute;\n left: 50%;\n content: '';\n z-index: 3;\n\n border-left: @shadowWidth solid @shadowColor;\n border-right: @highlightWidth solid @highlightColor;\n\n width: 0%;\n height: @verticalDividerHeight;\n}\n\n.ui.vertical.divider:before {\n top: -100%;\n}\n.ui.vertical.divider:after {\n top: auto;\n bottom: 0px;\n}\n\n/* Inside grid */\n@media only screen and (max-width : @largestMobileScreen) {\n\n .ui.stackable.grid .ui.vertical.divider,\n .ui.grid .stackable.row .ui.vertical.divider {\n display: table;\n white-space: nowrap;\n height: auto;\n margin: @horizontalMargin;\n overflow: hidden;\n line-height: 1;\n text-align: center;\n position: static;\n top: 0;\n left: 0;\n transform: none;\n }\n\n .ui.stackable.grid .ui.vertical.divider:before,\n .ui.grid .stackable.row .ui.vertical.divider:before,\n .ui.stackable.grid .ui.vertical.divider:after,\n .ui.grid .stackable.row .ui.vertical.divider:after {\n position: static;\n left: 0;\n border-left: none;\n border-right: none;\n content: '';\n display: table-cell;\n position: relative;\n top: 50%;\n width: 50%;\n background-repeat: no-repeat;\n }\n\n .ui.stackable.grid .ui.vertical.divider:before,\n .ui.grid .stackable.row .ui.vertical.divider:before {\n background-position: right @horizontalDividerMargin top 50%;\n }\n .ui.stackable.grid .ui.vertical.divider:after,\n .ui.grid .stackable.row .ui.vertical.divider:after {\n background-position: left @horizontalDividerMargin top 50%;\n }\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.divider > .icon {\n margin: @dividerIconMargin;\n font-size: @dividerIconSize;\n height: 1em;\n vertical-align: middle;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Hidden\n---------------*/\n\n.ui.hidden.divider {\n border-color: transparent !important;\n}\n.ui.hidden.divider:before,\n.ui.hidden.divider:after {\n display: none;\n}\n\n/*--------------\n Inverted\n---------------*/\n\n.ui.divider.inverted,\n.ui.vertical.inverted.divider,\n.ui.horizontal.inverted.divider {\n color: @invertedTextColor;\n}\n.ui.divider.inverted,\n.ui.divider.inverted:after,\n.ui.divider.inverted:before {\n border-top-color: @invertedShadowColor !important;\n border-left-color: @invertedShadowColor !important;\n border-bottom-color: @invertedHighlightColor !important;\n border-right-color: @invertedHighlightColor !important;\n}\n\n/*--------------\n Fitted\n---------------*/\n\n.ui.fitted.divider {\n margin: 0em;\n}\n\n/*--------------\n Clearing\n---------------*/\n\n.ui.clearing.divider {\n clear: both;\n}\n\n/*--------------\n Section\n---------------*/\n\n.ui.section.divider {\n margin-top: @sectionMargin;\n margin-bottom: @sectionMargin;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.divider {\n font-size: @medium;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/flag.less", "content": "/*!\n * # Semantic UI - Flag\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'flag';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Flag\n*******************************/\n\ni.flag:not(.icon) {\n display: inline-block;\n\n width: @width;\n height: @height;\n\n line-height: @height;\n vertical-align: @verticalAlign;\n margin: 0em @margin 0em 0em;\n\n text-decoration: inherit;\n\n speak: none;\n font-smoothing: antialiased;\n backface-visibility: hidden;\n}\n\n/* Sprite */\ni.flag:not(.icon):before {\n display: inline-block;\n content: '';\n background: url(@spritePath) no-repeat -108px -1976px;\n width: @width;\n height: @height;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/header.less", "content": "/*!\n * # Semantic UI - Header\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'header';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Header\n*******************************/\n\n/* Standard */\n.ui.header {\n border: none;\n margin: @margin;\n padding: @verticalPadding @horizontalPadding;\n font-family: @fontFamily;\n font-weight: @fontWeight;\n line-height: @lineHeight;\n text-transform: @textTransform;\n color: @textColor;\n}\n\n.ui.header:first-child {\n margin-top: @firstMargin;\n}\n.ui.header:last-child {\n margin-bottom: @lastMargin;\n}\n\n/*--------------\n Sub Header\n---------------*/\n\n.ui.header .sub.header {\n display: block;\n font-weight: @normal;\n padding: 0em;\n margin: @subHeaderMargin;\n font-size: @subHeaderFontSize;\n line-height: @subHeaderLineHeight;\n color: @subHeaderColor;\n}\n\n/*--------------\n Icon\n---------------*/\n\n.ui.header > .icon {\n display: table-cell;\n opacity: @iconOpacity;\n font-size: @iconSize;\n padding-top: @iconOffset;\n vertical-align: @iconAlignment;\n}\n\n/* With Text Node */\n.ui.header .icon:only-child {\n display: inline-block;\n padding: 0em;\n margin-right: @iconMargin;\n}\n\n/*-------------------\n Image\n--------------------*/\n\n.ui.header > .image:not(.icon),\n.ui.header > img {\n display: inline-block;\n margin-top: @imageOffset;\n width: @imageWidth;\n height: @imageHeight;\n vertical-align: @imageAlignment;\n}\n.ui.header > .image:not(.icon):only-child,\n.ui.header > img:only-child {\n margin-right: @imageMargin;\n}\n\n/*--------------\n Content\n---------------*/\n\n.ui.header .content {\n display: inline-block;\n vertical-align: @contentAlignment;\n}\n\n/* After Image */\n.ui.header > img + .content,\n.ui.header > .image + .content {\n padding-left: @imageMargin;\n vertical-align: @contentImageAlignment;\n}\n\n/* After Icon */\n.ui.header > .icon + .content {\n padding-left: @iconMargin;\n display: table-cell;\n vertical-align: @contentIconAlignment;\n}\n\n\n/*--------------\n Loose Coupling\n---------------*/\n\n.ui.header .ui.label {\n font-size: @labelSize;\n margin-left: @labelDistance;\n vertical-align: @labelVerticalAlign;\n}\n\n/* Positioning */\n.ui.header + p {\n margin-top: @nextParagraphDistance;\n}\n\n\n\n/*******************************\n Types\n*******************************/\n\n\n/*--------------\n Page\n---------------*/\n\nh1.ui.header {\n font-size: @h1;\n}\nh2.ui.header {\n font-size: @h2;\n}\nh3.ui.header {\n font-size: @h3;\n}\nh4.ui.header {\n font-size: @h4;\n}\nh5.ui.header {\n font-size: @h5;\n}\n\n\n/* Sub Header */\nh1.ui.header .sub.header {\n font-size: @h1SubHeaderFontSize;\n}\nh2.ui.header .sub.header {\n font-size: @h2SubHeaderFontSize;\n}\nh3.ui.header .sub.header {\n font-size: @h3SubHeaderFontSize;\n}\nh4.ui.header .sub.header {\n font-size: @h4SubHeaderFontSize;\n}\nh5.ui.header .sub.header {\n font-size: @h5SubHeaderFontSize;\n}\n\n\n/*--------------\n Content Heading\n---------------*/\n\n.ui.huge.header {\n min-height: 1em;\n font-size: @hugeFontSize;\n}\n.ui.large.header {\n font-size: @largeFontSize;\n}\n.ui.medium.header {\n font-size: @mediumFontSize;\n}\n.ui.small.header {\n font-size: @smallFontSize;\n}\n.ui.tiny.header {\n font-size: @tinyFontSize;\n}\n\n/* Sub Header */\n.ui.huge.header .sub.header {\n font-size: @hugeSubHeaderFontSize;\n}\n.ui.large.header .sub.header {\n font-size: @hugeSubHeaderFontSize;\n}\n.ui.header .sub.header {\n font-size: @subHeaderFontSize;\n}\n.ui.small.header .sub.header {\n font-size: @smallSubHeaderFontSize;\n}\n.ui.tiny.header .sub.header {\n font-size: @tinySubHeaderFontSize;\n}\n\n/*--------------\n Sub Heading\n---------------*/\n\n.ui.sub.header {\n padding: 0em;\n margin-bottom: @subHeadingDistance;\n font-weight: @subHeadingFontWeight;\n font-size: @subHeadingFontSize;\n text-transform: @subHeadingTextTransform;\n color: @subHeadingColor;\n}\n\n.ui.small.sub.header {\n font-size: @smallSubHeadingSize;\n}\n.ui.sub.header {\n font-size: @subHeadingFontSize;\n}\n.ui.large.sub.header {\n font-size: @largeSubHeadingSize;\n}\n.ui.huge.sub.header {\n font-size: @hugeSubHeadingSize;\n}\n\n\n\n/*-------------------\n Icon\n--------------------*/\n\n.ui.icon.header {\n display: inline-block;\n text-align: center;\n margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin;\n}\n.ui.icon.header:after {\n content: '';\n display: block;\n height: 0px;\n clear: both;\n visibility: hidden;\n}\n\n.ui.icon.header:first-child {\n margin-top: @iconHeaderFirstMargin;\n}\n.ui.icon.header .icon {\n float: none;\n display: block;\n width: auto;\n height: auto;\n line-height: 1;\n padding: 0em;\n font-size: @iconHeaderSize;\n margin: 0em auto @iconHeaderMargin;\n opacity: @iconHeaderOpacity;\n}\n.ui.icon.header .content {\n display: block;\n padding: 0em;\n}\n.ui.icon.header .circular.icon {\n font-size: @circularHeaderIconSize;\n}\n.ui.icon.header .square.icon {\n font-size: @squareHeaderIconSize;\n}\n.ui.block.icon.header .icon {\n margin-bottom: 0em;\n}\n.ui.icon.header.aligned {\n margin-left: auto;\n margin-right: auto;\n display: block;\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.disabled.header {\n opacity: @disabledOpacity;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.header {\n color: @invertedColor;\n}\n.ui.inverted.header .sub.header {\n color: @invertedSubHeaderColor;\n}\n.ui.inverted.attached.header {\n background: @invertedAttachedBackground;\n box-shadow: none;\n border-color: transparent;\n}\n.ui.inverted.block.header {\n background: @invertedBlockBackground;\n box-shadow: none;\n}\n.ui.inverted.block.header {\n border-bottom: none;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Red ---*/\n.ui.red.header {\n color: @red !important;\n}\na.ui.red.header:hover {\n color: @redHover !important;\n}\n.ui.red.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @red;\n}\n\n/* Inverted */\n.ui.inverted.red.header {\n color: @lightRed !important;\n}\na.ui.inverted.red.header:hover {\n color: @lightRedHover !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.header {\n color: @orange !important;\n}\na.ui.orange.header:hover {\n color: @orangeHover !important;\n}\n.ui.orange.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @orange;\n}\n/* Inverted */\n.ui.inverted.orange.header {\n color: @lightOrange !important;\n}\na.ui.inverted.orange.header:hover {\n color: @lightOrangeHover !important;\n}\n\n/*--- Olive ---*/\n.ui.olive.header {\n color: @olive !important;\n}\na.ui.olive.header:hover {\n color: @oliveHover !important;\n}\n.ui.olive.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @olive;\n}\n/* Inverted */\n.ui.inverted.olive.header {\n color: @lightOlive !important;\n}\na.ui.inverted.olive.header:hover {\n color: @lightOliveHover !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.header {\n color: @yellow !important;\n}\na.ui.yellow.header:hover {\n color: @yellowHover !important;\n}\n.ui.yellow.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @yellow;\n}\n/* Inverted */\n.ui.inverted.yellow.header {\n color: @lightYellow !important;\n}\na.ui.inverted.yellow.header:hover {\n color: @lightYellowHover !important;\n}\n\n/*--- Green ---*/\n.ui.green.header {\n color: @green !important;\n}\na.ui.green.header:hover {\n color: @greenHover !important;\n}\n.ui.green.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @green;\n}\n/* Inverted */\n.ui.inverted.green.header {\n color: @lightGreen !important;\n}\na.ui.inverted.green.header:hover {\n color: @lightGreenHover !important;\n}\n\n/*--- Teal ---*/\n.ui.teal.header {\n color: @teal !important;\n}\na.ui.teal.header:hover {\n color: @tealHover !important;\n}\n.ui.teal.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @teal;\n}\n/* Inverted */\n.ui.inverted.teal.header {\n color: @lightTeal !important;\n}\na.ui.inverted.teal.header:hover {\n color: @lightTealHover !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.header {\n color: @blue !important;\n}\na.ui.blue.header:hover {\n color: @blueHover !important;\n}\n.ui.blue.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @blue;\n}\n/* Inverted */\n.ui.inverted.blue.header {\n color: @lightBlue !important;\n}\na.ui.inverted.blue.header:hover {\n color: @lightBlueHover !important;\n}\n\n/*--- Violet ---*/\n.ui.violet.header {\n color: @violet !important;\n}\na.ui.violet.header:hover {\n color: @violetHover !important;\n}\n.ui.violet.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @violet;\n}\n/* Inverted */\n.ui.inverted.violet.header {\n color: @lightViolet !important;\n}\na.ui.inverted.violet.header:hover {\n color: @lightVioletHover !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.header {\n color: @purple !important;\n}\na.ui.purple.header:hover {\n color: @purpleHover !important;\n}\n.ui.purple.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @purple;\n}\n/* Inverted */\n.ui.inverted.purple.header {\n color: @lightPurple !important;\n}\na.ui.inverted.purple.header:hover {\n color: @lightPurpleHover !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.header {\n color: @pink !important;\n}\na.ui.pink.header:hover {\n color: @pinkHover !important;\n}\n.ui.pink.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @pink;\n}\n/* Inverted */\n.ui.inverted.pink.header {\n color: @lightPink !important;\n}\na.ui.inverted.pink.header:hover {\n color: @lightPinkHover !important;\n}\n\n/*--- Brown ---*/\n.ui.brown.header {\n color: @brown !important;\n}\na.ui.brown.header:hover {\n color: @brownHover !important;\n}\n.ui.brown.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @brown;\n}\n/* Inverted */\n.ui.inverted.brown.header {\n color: @lightBrown !important;\n}\na.ui.inverted.brown.header:hover {\n color: @lightBrownHover !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.header {\n color: @grey !important;\n}\na.ui.grey.header:hover {\n color: @greyHover !important;\n}\n.ui.grey.dividing.header {\n border-bottom: @dividedColoredBorderWidth solid @grey;\n}\n/* Inverted */\n.ui.inverted.grey.header {\n color: @lightGrey !important;\n}\na.ui.inverted.grey.header:hover {\n color: @lightGreyHover !important;\n}\n\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui.left.aligned.header {\n text-align: left;\n}\n.ui.right.aligned.header {\n text-align: right;\n}\n.ui.centered.header,\n.ui.center.aligned.header {\n text-align: center;\n}\n.ui.justified.header {\n text-align: justify;\n}\n.ui.justified.header:after {\n display: inline-block;\n content: '';\n width: 100%;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.header,\n.ui[class*=\"left floated\"].header {\n float: left;\n margin-top: 0em;\n margin-right: @floatedMargin;\n}\n.ui[class*=\"right floated\"].header {\n float: right;\n margin-top: 0em;\n margin-left: @floatedMargin;\n}\n\n/*-------------------\n Fitted\n--------------------*/\n\n.ui.fitted.header {\n padding: 0em;\n}\n\n\n/*-------------------\n Dividing\n--------------------*/\n\n.ui.dividing.header {\n padding-bottom: @dividedBorderPadding;\n border-bottom: @dividedBorder;\n}\n.ui.dividing.header .sub.header {\n padding-bottom: @dividedSubHeaderPadding;\n}\n.ui.dividing.header .icon {\n margin-bottom: @dividedIconPadding;\n}\n\n.ui.inverted.dividing.header {\n border-bottom-color: @invertedDividedBorderColor;\n}\n\n\n/*-------------------\n Block\n--------------------*/\n\n.ui.block.header {\n background: @blockBackground;\n padding: @blockVerticalPadding @blockHorizontalPadding;\n box-shadow: @blockBoxShadow;\n border: @blockBorder;\n border-radius: @blockBorderRadius;\n}\n\n.ui.tiny.block.header {\n font-size: @tinyBlock;\n}\n.ui.small.block.header {\n font-size: @smallBlock;\n}\n.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumBlock;\n}\n.ui.large.block.header {\n font-size: @largeBlock;\n}\n.ui.huge.block.header {\n font-size: @hugeBlock;\n}\n\n/*-------------------\n Attached\n--------------------*/\n\n.ui.attached.header {\n background: @attachedBackground;\n padding: @attachedVerticalPadding @attachedHorizontalPadding;\n margin-left: @attachedOffset;\n margin-right: @attachedOffset;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached.block.header {\n background: @blockBackground;\n}\n\n.ui.attached:not(.top):not(.bottom).header {\n margin-top: 0em;\n margin-bottom: 0em;\n border-top: none;\n border-radius: 0em;\n}\n.ui.top.attached.header {\n margin-bottom: 0em;\n border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;\n}\n.ui.bottom.attached.header {\n margin-top: 0em;\n border-top: none;\n border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;\n}\n\n/* Attached Sizes */\n.ui.tiny.attached.header {\n font-size: @tinyAttachedSize;\n}\n.ui.small.attached.header {\n font-size: @smallAttachedSize;\n}\n.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumAttachedSize;\n}\n.ui.large.attached.header {\n font-size: @largeAttachedSize;\n}\n.ui.huge.attached.header {\n font-size: @hugeAttachedSize;\n}\n\n/*-------------------\n Sizing\n--------------------*/\n\n.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {\n font-size: @mediumFontSize;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/icon.less", "content": "/*!\n * # Semantic UI - Icon\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'icon';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Icon\n*******************************/\n\n@font-face {\n font-family: 'Icons';\n src: @fallbackSRC;\n src: @src;\n font-style: normal;\n font-weight: @normal;\n font-variant: normal;\n text-decoration: inherit;\n text-transform: none;\n}\n\ni.icon {\n display: inline-block;\n opacity: @opacity;\n\n margin: 0em @distanceFromText 0em 0em;\n\n width: @width;\n height: @height;\n\n font-family: 'Icons';\n font-style: normal;\n font-weight: @normal;\n text-decoration: inherit;\n text-align: center;\n\n speak: none;\n font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n backface-visibility: hidden;\n}\n\ni.icon:before {\n background: none !important;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Loading\n---------------*/\n\ni.icon.loading {\n height: 1em;\n line-height: 1;\n animation: icon-loading @loadingDuration linear infinite;\n}\n@keyframes icon-loading {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*******************************\n States\n*******************************/\n\ni.icon.hover {\n opacity: 1 !important;\n}\n\ni.icon.active {\n opacity: 1 !important;\n}\n\ni.emphasized.icon {\n opacity: 1 !important;\n}\n\ni.disabled.icon {\n opacity: @disabledOpacity !important;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Fitted\n--------------------*/\n\ni.fitted.icon {\n width: auto;\n margin: 0em !important;\n}\n\n/*-------------------\n Link\n--------------------*/\n\ni.link.icon, i.link.icons {\n cursor: pointer;\n opacity: @linkOpacity;\n transition: opacity @defaultDuration @defaultEasing;\n}\ni.link.icon:hover, i.link.icons:hover {\n opacity: 1 !important;\n}\n\n/*-------------------\n Circular\n--------------------*/\n\ni.circular.icon {\n border-radius: 500em !important;\n line-height: 1 !important;\n\n padding: @circularPadding !important;\n box-shadow: @circularShadow;\n\n width: @circularSize !important;\n height: @circularSize !important;\n}\ni.circular.inverted.icon {\n border: none;\n box-shadow: none;\n}\n\n/*-------------------\n Flipped\n--------------------*/\n\ni.flipped.icon,\ni.horizontally.flipped.icon {\n transform: scale(-1, 1);\n}\ni.vertically.flipped.icon {\n transform: scale(1, -1);\n}\n\n/*-------------------\n Rotated\n--------------------*/\n\ni.rotated.icon,\ni.right.rotated.icon,\ni.clockwise.rotated.icon {\n transform: rotate(90deg);\n}\n\ni.left.rotated.icon,\ni.counterclockwise.rotated.icon {\n transform: rotate(-90deg);\n}\n\n/*-------------------\n Bordered\n--------------------*/\n\ni.bordered.icon {\n line-height: 1;\n vertical-align: baseline;\n\n width: @borderedSize;\n height: @borderedSize;\n padding: @borderedVerticalPadding @borderedHorizontalPadding !important;\n box-shadow: @borderedShadow;\n}\ni.bordered.inverted.icon {\n border: none;\n box-shadow: none;\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n/* Inverted Shapes */\ni.inverted.bordered.icon,\ni.inverted.circular.icon {\n background-color: @black !important;\n color: @white !important;\n}\n\ni.inverted.icon {\n color: @white;\n}\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\ni.red.icon {\n color: @red !important;\n}\ni.inverted.red.icon {\n color: @lightRed !important;\n}\ni.inverted.bordered.red.icon,\ni.inverted.circular.red.icon {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\ni.orange.icon {\n color: @orange !important;\n}\ni.inverted.orange.icon {\n color: @lightOrange !important;\n}\ni.inverted.bordered.orange.icon,\ni.inverted.circular.orange.icon {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\ni.yellow.icon {\n color: @yellow !important;\n}\ni.inverted.yellow.icon {\n color: @lightYellow !important;\n}\ni.inverted.bordered.yellow.icon,\ni.inverted.circular.yellow.icon {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\ni.olive.icon {\n color: @olive !important;\n}\ni.inverted.olive.icon {\n color: @lightOlive !important;\n}\ni.inverted.bordered.olive.icon,\ni.inverted.circular.olive.icon {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\ni.green.icon {\n color: @green !important;\n}\ni.inverted.green.icon {\n color: @lightGreen !important;\n}\ni.inverted.bordered.green.icon,\ni.inverted.circular.green.icon {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\ni.teal.icon {\n color: @teal !important;\n}\ni.inverted.teal.icon {\n color: @lightTeal !important;\n}\ni.inverted.bordered.teal.icon,\ni.inverted.circular.teal.icon {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\ni.blue.icon {\n color: @blue !important;\n}\ni.inverted.blue.icon {\n color: @lightBlue !important;\n}\ni.inverted.bordered.blue.icon,\ni.inverted.circular.blue.icon {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\ni.violet.icon {\n color: @violet !important;\n}\ni.inverted.violet.icon {\n color: @lightViolet !important;\n}\ni.inverted.bordered.violet.icon,\ni.inverted.circular.violet.icon {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\ni.purple.icon {\n color: @purple !important;\n}\ni.inverted.purple.icon {\n color: @lightPurple !important;\n}\ni.inverted.bordered.purple.icon,\ni.inverted.circular.purple.icon {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\ni.pink.icon {\n color: @pink !important;\n}\ni.inverted.pink.icon {\n color: @lightPink !important;\n}\ni.inverted.bordered.pink.icon,\ni.inverted.circular.pink.icon {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\ni.brown.icon {\n color: @brown !important;\n}\ni.inverted.brown.icon {\n color: @lightBrown !important;\n}\ni.inverted.bordered.brown.icon,\ni.inverted.circular.brown.icon {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\ni.grey.icon {\n color: @grey !important;\n}\ni.inverted.grey.icon {\n color: @lightGrey !important;\n}\ni.inverted.bordered.grey.icon,\ni.inverted.circular.grey.icon {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\ni.black.icon {\n color: @black !important;\n}\ni.inverted.black.icon {\n color: @lightBlack !important;\n}\ni.inverted.bordered.black.icon,\ni.inverted.circular.black.icon {\n background-color: @black !important;\n color: @white !important;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\ni.mini.icon,\ni.mini.icons {\n line-height: 1;\n font-size: @mini;\n}\ni.tiny.icon,\ni.tiny.icons {\n line-height: 1;\n font-size: @tiny;\n}\ni.small.icon,\ni.small.icons {\n line-height: 1;\n font-size: @small;\n}\ni.icon,\ni.icons {\n font-size: @medium;\n}\ni.large.icon,\ni.large.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @large;\n}\ni.big.icon,\ni.big.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @big;\n}\ni.huge.icon,\ni.huge.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @huge;\n}\ni.massive.icon,\ni.massive.icons {\n line-height: 1;\n vertical-align: middle;\n font-size: @massive;\n}\n\n/*******************************\n Groups\n*******************************/\n\ni.icons {\n display: inline-block;\n position: relative;\n line-height: 1;\n}\n\ni.icons .icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n margin: 0em;\n margin: 0;\n}\n\ni.icons .icon:first-child {\n position: static;\n width: auto;\n height: auto;\n vertical-align: top;\n transform: none;\n margin-right: @distanceFromText;\n}\n\n/* Corner Icon */\ni.icons .corner.icon {\n top: auto;\n left: auto;\n right: 0;\n bottom: 0;\n transform: none;\n font-size: @cornerIconSize;\n text-shadow: @cornerIconShadow;\n}\ni.icons .top.right.corner.icon {\n top: 0;\n left: auto;\n right: 0;\n bottom: auto;\n}\ni.icons .top.left.corner.icon {\n top: 0;\n left: 0;\n right: auto;\n bottom: auto;\n}\ni.icons .bottom.left.corner.icon {\n top: auto;\n left: 0;\n right: auto;\n bottom: 0;\n}\ni.icons .bottom.right.corner.icon {\n top: auto;\n left: auto;\n right: 0;\n bottom: 0;\n}\n\ni.icons .inverted.corner.icon {\n text-shadow: @cornerIconInvertedShadow;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/image.less", "content": "/*!\n * # Semantic UI - Image\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'image';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Image\n*******************************/\n\n.ui.image {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n max-width: 100%;\n background-color: @placeholderColor;\n}\n\nimg.ui.image {\n display: block;\n}\n\n.ui.image svg,\n.ui.image img {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n\n/*******************************\n States\n*******************************/\n\n.ui.hidden.images,\n.ui.hidden.image {\n display: none;\n}\n.ui.hidden.transition.images,\n.ui.hidden.transition.image {\n display: block;\n visibility: hidden;\n}\n.ui.images > .hidden.transition {\n display: inline-block;\n visibility: hidden;\n}\n\n\n.ui.disabled.images,\n.ui.disabled.image {\n cursor: default;\n opacity: @disabledOpacity;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------\n Inline\n---------------*/\n\n.ui.inline.image,\n.ui.inline.image svg,\n.ui.inline.image img {\n display: inline-block;\n}\n\n/*------------------\n Vertical Aligned\n-------------------*/\n\n.ui.top.aligned.images .image,\n.ui.top.aligned.image,\n.ui.top.aligned.image svg,\n.ui.top.aligned.image img {\n display: inline-block;\n vertical-align: top;\n}\n.ui.middle.aligned.images .image,\n.ui.middle.aligned.image,\n.ui.middle.aligned.image svg,\n.ui.middle.aligned.image img {\n display: inline-block;\n vertical-align: middle;\n}\n.ui.bottom.aligned.images .image,\n.ui.bottom.aligned.image,\n.ui.bottom.aligned.image svg,\n.ui.bottom.aligned.image img {\n display: inline-block;\n vertical-align: bottom;\n}\n\n/*--------------\n Rounded\n---------------*/\n\n.ui.rounded.images .image,\n.ui.rounded.image,\n.ui.rounded.images .image > *,\n.ui.rounded.image > * {\n border-radius: @roundedBorderRadius;\n}\n\n/*--------------\n Bordered\n---------------*/\n\n.ui.bordered.images .image,\n.ui.bordered.images img,\n.ui.bordered.images svg,\n.ui.bordered.image img,\n.ui.bordered.image svg,\nimg.ui.bordered.image {\n border: @imageBorder;\n}\n\n/*--------------\n Circular\n---------------*/\n\n.ui.circular.images,\n.ui.circular.image {\n overflow: hidden;\n}\n\n.ui.circular.images .image,\n.ui.circular.image,\n.ui.circular.images .image > *,\n.ui.circular.image > * {\n -webkit-border-radius: @circularRadius;\n -moz-border-radius: @circularRadius;\n border-radius: @circularRadius;\n}\n\n/*--------------\n Fluid\n---------------*/\n\n.ui.fluid.images,\n.ui.fluid.image,\n.ui.fluid.images img,\n.ui.fluid.images svg,\n.ui.fluid.image svg,\n.ui.fluid.image img {\n display: block;\n width: 100%;\n height: auto;\n}\n\n\n/*--------------\n Avatar\n---------------*/\n\n.ui.avatar.images .image,\n.ui.avatar.images img,\n.ui.avatar.images svg,\n.ui.avatar.image img,\n.ui.avatar.image svg,\n.ui.avatar.image {\n margin-right: @avatarMargin;\n\n display: inline-block;\n width: @avatarSize;\n height: @avatarSize;\n\n -webkit-border-radius: @circularRadius;\n -moz-border-radius: @circularRadius;\n border-radius: @circularRadius;\n}\n\n/*-------------------\n Spaced\n--------------------*/\n\n.ui.spaced.image {\n display: inline-block !important;\n margin-left: @spacedDistance;\n margin-right: @spacedDistance;\n}\n\n.ui[class*=\"left spaced\"].image {\n margin-left: @spacedDistance;\n margin-right: 0em;\n}\n\n.ui[class*=\"right spaced\"].image {\n margin-left: 0em;\n margin-right: @spacedDistance;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.image,\n.ui.floated.images {\n float: left;\n margin-right: @floatedHorizontalMargin;\n margin-bottom: @floatedVerticalMargin;\n}\n.ui.right.floated.images,\n.ui.right.floated.image {\n float: right;\n margin-right: 0em;\n margin-bottom: @floatedVerticalMargin;\n margin-left: @floatedHorizontalMargin;\n}\n\n.ui.floated.images:last-child,\n.ui.floated.image:last-child {\n margin-bottom: 0em;\n}\n\n\n.ui.centered.images,\n.ui.centered.image {\n margin-left: auto;\n margin-right: auto;\n}\n\n/*--------------\n Sizes\n---------------*/\n\n.ui.mini.images .image,\n.ui.mini.images img,\n.ui.mini.images svg,\n.ui.mini.image {\n width: @miniWidth;\n height: auto;\n font-size: @mini;\n}\n.ui.tiny.images .image,\n.ui.tiny.images img,\n.ui.tiny.images svg,\n.ui.tiny.image {\n width: @tinyWidth;\n height: auto;\n font-size: @tiny;\n}\n.ui.small.images .image,\n.ui.small.images img,\n.ui.small.images svg,\n.ui.small.image {\n width: @smallWidth;\n height: auto;\n font-size: @small;\n}\n.ui.medium.images .image,\n.ui.medium.images img,\n.ui.medium.images svg,\n.ui.medium.image {\n width: @mediumWidth;\n height: auto;\n font-size: @medium;\n}\n.ui.large.images .image,\n.ui.large.images img,\n.ui.large.images svg,\n.ui.large.image {\n width: @largeWidth;\n height: auto;\n font-size: @large;\n}\n.ui.big.images .image,\n.ui.big.images img,\n.ui.big.images svg,\n.ui.big.image {\n width: @bigWidth;\n height: auto;\n font-size: @big;\n}\n.ui.huge.images .image,\n.ui.huge.images img,\n.ui.huge.images svg,\n.ui.huge.image {\n width: @hugeWidth;\n height: auto;\n font-size: @huge;\n}\n.ui.massive.images .image,\n.ui.massive.images img,\n.ui.massive.images svg,\n.ui.massive.image {\n width: @massiveWidth;\n height: auto;\n font-size: @massive;\n}\n\n\n/*******************************\n Groups\n*******************************/\n\n.ui.images {\n font-size: 0em;\n margin: 0em -@imageHorizontalMargin 0rem;\n}\n\n.ui.images .image,\n.ui.images > img,\n.ui.images > svg {\n display: inline-block;\n margin: 0em @imageHorizontalMargin @imageVerticalMargin;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/input.less", "content": "/*!\n * # Semantic UI - Input\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'input';\n\n@import (multiple) '../../theme.config';\n\n\n/*******************************\n Standard\n*******************************/\n\n\n/*--------------------\n Inputs\n---------------------*/\n\n.ui.input {\n position: relative;\n font-weight: @normal;\n font-style: normal;\n display: inline-flex;\n color: @inputColor;\n}\n.ui.input > input {\n margin: 0em;\n max-width: 100%;\n flex: 1 0 auto;\n outline: none;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n text-align: @textAlign;\n line-height: @lineHeight;\n\n font-family: @inputFont;\n padding: @padding;\n\n background: @background;\n border: @border;\n color: @inputColor;\n border-radius: @borderRadius;\n transition: @transition;\n\n box-shadow: @boxShadow;\n}\n\n\n/*--------------------\n Placeholder\n---------------------*/\n\n/* browsers require these rules separate */\n\n.ui.input > input::-webkit-input-placeholder {\n color: @placeholderColor;\n}\n.ui.input > input::-moz-placeholder {\n color: @placeholderColor;\n}\n.ui.input > input:-ms-input-placeholder {\n color: @placeholderColor;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------------\n Disabled\n---------------------*/\n\n.ui.disabled.input,\n.ui.input:not(.disabled) input[disabled] {\n opacity: @disabledOpacity;\n}\n\n.ui.disabled.input > input,\n.ui.input:not(.disabled) input[disabled] {\n pointer-events: none;\n}\n\n/*--------------------\n Active\n---------------------*/\n\n.ui.input > input:active,\n.ui.input.down input {\n border-color: @downBorderColor;\n background: @downBackground;\n color: @downColor;\n box-shadow: @downBoxShadow;\n}\n\n/*--------------------\n Loading\n---------------------*/\n\n.ui.loading.loading.input > i.icon:before {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @loaderFillColor;\n}\n.ui.loading.loading.input > i.icon:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: button-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor transparent transparent;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n\n\n/*--------------------\n Focus\n---------------------*/\n\n.ui.input.focus > input,\n.ui.input > input:focus {\n border-color: @focusBorderColor;\n background: @focusBackground;\n color: @focusColor;\n box-shadow: @focusBoxShadow;\n}\n.ui.input.focus > input::-webkit-input-placeholder,\n.ui.input > input:focus::-webkit-input-placeholder {\n color: @placeholderFocusColor;\n}\n.ui.input.focus > input::-moz-placeholder,\n.ui.input > input:focus::-moz-placeholder {\n color: @placeholderFocusColor;\n}\n.ui.input.focus > input:-ms-input-placeholder,\n.ui.input > input:focus:-ms-input-placeholder {\n color: @placeholderFocusColor;\n}\n\n\n\n/*--------------------\n Error\n---------------------*/\n\n.ui.input.error > input {\n background-color: @errorBackground;\n border-color: @errorBorder;\n color: @errorColor;\n box-shadow: @errorBoxShadow;\n}\n\n/* Error Placeholder */\n.ui.input.error > input::-webkit-input-placeholder {\n color: @placeholderErrorColor;\n}\n.ui.input.error > input::-moz-placeholder {\n color: @placeholderErrorColor;\n}\n.ui.input.error > input:-ms-input-placeholder {\n color: @placeholderErrorColor !important;\n}\n\n/* Focused Error Placeholder */\n.ui.input.error > input:focus::-webkit-input-placeholder {\n color: @placeholderErrorFocusColor;\n}\n.ui.input.error > input:focus::-moz-placeholder {\n color: @placeholderErrorFocusColor;\n}\n.ui.input.error > input:focus:-ms-input-placeholder {\n color: @placeholderErrorFocusColor !important;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------------\n Transparent\n---------------------*/\n\n\n.ui.transparent.input > input {\n border-color: transparent !important;\n background-color: transparent !important;\n padding: 0em !important;\n box-shadow: none !important;\n border-radius: 0px !important;\n}\n\n/* Transparent Icon */\n.ui.transparent.icon.input > i.icon {\n width: @transparentIconWidth;\n}\n.ui.transparent.icon.input > input {\n padding-left: 0em !important;\n padding-right: @transparentIconMargin !important;\n}\n.ui.transparent[class*=\"left icon\"].input > input {\n padding-left: @transparentIconMargin !important;\n padding-right: 0em !important;\n}\n\n/* Transparent Inverted */\n.ui.transparent.inverted.input {\n color: @transparentInvertedColor;\n}\n.ui.transparent.inverted.input > input {\n color: inherit;\n}\n\n.ui.transparent.inverted.input > input::-webkit-input-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n.ui.transparent.inverted.input > input::-moz-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n.ui.transparent.inverted.input > input:-ms-input-placeholder {\n color: @transparentInvertedPlaceholderColor;\n}\n\n\n/*--------------------\n Icon\n---------------------*/\n\n.ui.icon.input > i.icon {\n cursor: default;\n position: absolute;\n line-height: 1;\n text-align: center;\n top: 0px;\n right: 0px;\n margin: 0em;\n height: 100%;\n\n width: @iconWidth;\n opacity: @iconOpacity;\n border-radius: 0em @borderRadius @borderRadius 0em;\n transition: @iconTransition;\n}\n.ui.icon.input > i.icon:not(.link) {\n pointer-events: none;\n}\n.ui.icon.input > input {\n padding-right: @iconMargin !important;\n}\n\n.ui.icon.input > i.icon:before,\n.ui.icon.input > i.icon:after {\n left: 0;\n position: absolute;\n text-align: center;\n top: 50%;\n width: 100%;\n margin-top: @iconOffset;\n}\n.ui.icon.input > i.link.icon {\n cursor: pointer;\n}\n.ui.icon.input > i.circular.icon {\n top: @circularIconVerticalOffset;\n right: @circularIconHorizontalOffset;\n}\n\n/* Left Icon Input */\n.ui[class*=\"left icon\"].input > i.icon {\n right: auto;\n left: @borderWidth;\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"left icon\"].input > i.circular.icon {\n right: auto;\n left: @circularIconHorizontalOffset;\n}\n.ui[class*=\"left icon\"].input > input {\n padding-left: @iconMargin !important;\n padding-right: @horizontalPadding !important;\n}\n\n/* Focus */\n.ui.icon.input > input:focus ~ i.icon {\n opacity: 1;\n}\n\n/*--------------------\n Labeled\n---------------------*/\n\n/* Adjacent Label */\n.ui.labeled.input > .label {\n flex: 0 0 auto;\n margin: 0;\n font-size: @relativeMedium;\n}\n.ui.labeled.input > .label:not(.corner) {\n padding-top: @verticalPadding;\n padding-bottom: @verticalPadding;\n}\n\n/* Regular Label on Left */\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child {\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child + input {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n border-left-color: transparent;\n}\n.ui.labeled.input:not([class*=\"corner labeled\"]) .label:first-child + input:focus {\n border-left-color: @focusBorderColor;\n}\n\n/* Regular Label on Right */\n.ui[class*=\"right labeled\"].input > input {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n border-right-color: transparent !important;\n}\n.ui[class*=\"right labeled\"].input > input + .label {\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n}\n\n.ui[class*=\"right labeled\"].input > input:focus {\n border-right-color: @focusBorderColor !important;\n}\n\n/* Corner Label */\n.ui.labeled.input .corner.label {\n top: @labelCornerTop;\n right: @labelCornerRight;\n font-size: @labelCornerSize;\n border-radius: 0em @borderRadius 0em 0em;\n}\n\n/* Spacing with corner label */\n.ui[class*=\"corner labeled\"]:not([class*=\"left corner labeled\"]).labeled.input > input {\n padding-right: @labeledMargin !important;\n}\n.ui[class*=\"corner labeled\"].icon.input:not([class*=\"left corner labeled\"]) > input {\n padding-right: @labeledIconInputMargin !important;\n}\n.ui[class*=\"corner labeled\"].icon.input:not([class*=\"left corner labeled\"]) > .icon {\n margin-right: @labeledIconMargin;\n}\n\n/* Left Labeled */\n.ui[class*=\"left corner labeled\"].labeled.input > input {\n padding-left: @labeledMargin !important;\n}\n.ui[class*=\"left corner labeled\"].icon.input > input {\n padding-left: @labeledIconInputMargin !important;\n}\n.ui[class*=\"left corner labeled\"].icon.input > .icon {\n margin-left: @labeledIconMargin;\n}\n\n/* Corner Label Position */\n.ui.input > .ui.corner.label {\n top: @borderWidth;\n right: @borderWidth;\n}\n.ui.input > .ui.left.corner.label {\n right: auto;\n left: @borderWidth;\n}\n\n\n/*--------------------\n Action\n---------------------*/\n\n.ui.action.input > .button,\n.ui.action.input > .buttons {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n}\n.ui.action.input > .button,\n.ui.action.input > .buttons > .button {\n padding-top: @verticalPadding;\n padding-bottom: @verticalPadding;\n margin: 0;\n}\n\n/* Button on Right */\n.ui.action.input:not([class*=\"left action\"]) > input {\n border-top-right-radius: 0px !important;\n border-bottom-right-radius: 0px !important;\n border-right-color: transparent !important;\n}\n.ui.action.input:not([class*=\"left action\"]) > .dropdown:not(:first-child),\n.ui.action.input:not([class*=\"left action\"]) > .button:not(:first-child),\n.ui.action.input:not([class*=\"left action\"]) > .buttons:not(:first-child) > .button {\n border-radius: 0px;\n}\n.ui.action.input:not([class*=\"left action\"]) > .dropdown:last-child,\n.ui.action.input:not([class*=\"left action\"]) > .button:last-child,\n.ui.action.input:not([class*=\"left action\"]) > .buttons:last-child > .button {\n border-radius: 0px @borderRadius @borderRadius 0px;\n}\n\n/* Input Focus */\n.ui.action.input:not([class*=\"left action\"]) > input:focus {\n border-right-color: @focusBorderColor !important;\n}\n\n/* Button on Left */\n.ui[class*=\"left action\"].input > input {\n border-top-left-radius: 0px !important;\n border-bottom-left-radius: 0px !important;\n border-left-color: transparent !important;\n}\n.ui[class*=\"left action\"].input > .dropdown,\n.ui[class*=\"left action\"].input > .button,\n.ui[class*=\"left action\"].input > .buttons > .button {\n border-radius: 0px;\n}\n.ui[class*=\"left action\"].input > .dropdown:first-child,\n.ui[class*=\"left action\"].input > .button:first-child,\n.ui[class*=\"left action\"].input > .buttons:first-child > .button {\n border-radius: @borderRadius 0px 0px @borderRadius;\n}\n/* Input Focus */\n.ui[class*=\"left action\"].input > input:focus {\n border-left-color: @focusBorderColor !important;\n}\n\n/*--------------------\n Inverted\n---------------------*/\n\n/* Standard */\n.ui.inverted.input > input {\n border: none;\n}\n\n/*--------------------\n Fluid\n---------------------*/\n\n.ui.fluid.input {\n display: flex;\n}\n.ui.fluid.input > input {\n width: 0px !important;\n}\n\n/*--------------------\n Size\n---------------------*/\n\n.ui.mini.input {\n font-size: @relativeMini;\n}\n.ui.small.input {\n font-size: @relativeSmall;\n}\n.ui.input {\n font-size: @relativeMedium;\n}\n.ui.large.input {\n font-size: @relativeLarge;\n}\n.ui.big.input {\n font-size: @relativeBig;\n}\n.ui.huge.input {\n font-size: @relativeHuge;\n}\n.ui.massive.input {\n font-size: @relativeMassive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/label.less", "content": "/*!\n * # Semantic UI - Label\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'label';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Label\n*******************************/\n\n.ui.label {\n display: inline-block;\n line-height: 1;\n vertical-align: @verticalAlign;\n\n margin: @verticalMargin @horizontalMargin;\n\n background-color: @backgroundColor;\n background-image: @backgroundImage;\n padding: @verticalPadding @horizontalPadding;\n color: @color;\n\n text-transform: @textTransform;\n font-weight: @fontWeight;\n\n border: @border;\n border-radius: @borderRadius;\n transition: @transition;\n}\n\n.ui.label:first-child {\n margin-left: 0em;\n}\n.ui.label:last-child {\n margin-right: 0em;\n}\n\n/* Link */\na.ui.label {\n cursor: pointer;\n}\n\n/* Inside Link */\n.ui.label > a {\n cursor: pointer;\n color: inherit;\n opacity: @linkOpacity;\n transition: @linkTransition;\n}\n.ui.label > a:hover {\n opacity: 1;\n}\n\n/* Image */\n.ui.label > img {\n width: auto !important;\n vertical-align: middle;\n height: @imageHeight !important;\n}\n\n/* Icon */\n.ui.label > .icon {\n width: auto;\n margin: 0em @iconDistance 0em 0em;\n}\n\n/* Detail */\n.ui.label > .detail {\n display: inline-block;\n vertical-align: top;\n font-weight: @detailFontWeight;\n margin-left: @detailMargin;\n opacity: @detailOpacity;\n}\n.ui.label > .detail .icon {\n margin: 0em @detailIconDistance 0em 0em;\n}\n\n\n/* Removable label */\n.ui.label > .close.icon,\n.ui.label > .delete.icon {\n cursor: pointer;\n margin-right: 0em;\n margin-left: @deleteMargin;\n font-size: @deleteSize;\n opacity: @deleteOpacity;\n transition: @deleteTransition;\n}\n.ui.label > .delete.icon:hover {\n opacity: 1;\n}\n\n/*-------------------\n Group\n--------------------*/\n\n.ui.labels > .label {\n margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em;\n}\n\n\n/*-------------------\n Coupling\n--------------------*/\n\n.ui.header > .ui.label {\n margin-top: @lineHeightOffset;\n}\n\n\n/* Remove border radius on attached segment */\n.ui.attached.segment > .ui.top.left.attached.label,\n.ui.bottom.attached.segment > .ui.top.left.attached.label {\n border-top-left-radius: 0;\n}\n.ui.attached.segment > .ui.top.right.attached.label,\n.ui.bottom.attached.segment > .ui.top.right.attached.label {\n border-top-right-radius: 0;\n}\n.ui.top.attached.segment > .ui.bottom.left.attached.label {\n border-bottom-left-radius: 0;\n}\n.ui.top.attached.segment > .ui.bottom.right.attached.label {\n border-bottom-right-radius: 0;\n}\n\n/* Padding on next content after a label */\n.ui.top.attached.label:first-child + :not(.attached),\n.ui.top.attached.label + [class*=\"right floated\"] + * {\n margin-top: @attachedSegmentPadding !important;\n}\n.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {\n margin-top: 0em;\n margin-bottom: @attachedSegmentPadding !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n.ui.image.label {\n width: auto !important;\n margin-top: 0em;\n margin-bottom: 0em;\n max-width: 9999px;\n vertical-align: baseline;\n text-transform: none;\n\n background: @imageLabelBackground;\n padding: @imageLabelPadding;\n border-radius: @imageLabelBorderRadius;\n box-shadow: @imageLabelBoxShadow;\n}\n\n.ui.image.label img {\n display: inline-block;\n vertical-align: top;\n\n height: @imageLabelImageHeight;\n margin: @imageLabelImageMargin;\n border-radius: @imageLabelImageBorderRadius;\n}\n\n.ui.image.label .detail {\n background: @imageLabelDetailBackground;\n margin: @imageLabelDetailMargin;\n padding: @imageLabelDetailPadding;\n border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em;\n}\n\n/*-------------------\n Tag\n--------------------*/\n\n.ui.tag.labels .label,\n.ui.tag.label {\n margin-left: 1em;\n position: relative;\n padding-left: @tagHorizontalPadding;\n padding-right: @tagHorizontalPadding;\n\n border-radius: 0em @borderRadius @borderRadius 0em;\n transition: @tagTransition;\n}\n.ui.tag.labels .label:before,\n.ui.tag.label:before {\n position: absolute;\n transform: translateY(-50%) translateX(50%) rotate(-45deg);\n\n top: @tagTriangleTopOffset;\n right: @tagTriangleRightOffset;\n content: '';\n\n background-color: inherit;\n background-image: @tagTriangleBackgroundImage;\n\n width: @tagTriangleSize;\n height: @tagTriangleSize;\n transition: @tagTransition;\n}\n\n\n.ui.tag.labels .label:after,\n.ui.tag.label:after {\n position: absolute;\n content: '';\n top: 50%;\n left: -(@tagCircleSize / 2);\n\n margin-top: -(@tagCircleSize / 2);\n background-color: @tagCircleColor !important;\n width: @tagCircleSize;\n height: @tagCircleSize;\n\n box-shadow: @tagCircleBoxShadow;\n border-radius: @circularRadius;\n}\n\n\n/*-------------------\n Corner Label\n--------------------*/\n\n.ui.corner.label {\n position: absolute;\n top: 0em;\n right: 0em;\n margin: 0em;\n padding: 0em;\n text-align: center;\n\n border-color: @backgroundColor;\n\n width: @cornerTriangleSize;\n height: @cornerTriangleSize;\n z-index: @cornerTriangleZIndex;\n transition: @cornerTriangleTransition;\n}\n\n/* Icon Label */\n.ui.corner.label{\n background-color: transparent !important;\n}\n.ui.corner.label:after {\n position: absolute;\n content: \"\";\n right: 0em;\n top: 0em;\n z-index: -1;\n\n width: 0em;\n height: 0em;\n background-color: transparent !important;\n\n border-top: 0em solid transparent;\n border-right: @cornerTriangleSize solid transparent;\n border-bottom: @cornerTriangleSize solid transparent;\n border-left: 0em solid transparent;\n\n border-right-color: inherit;\n transition: @cornerTriangleTransition;\n}\n\n.ui.corner.label .icon {\n cursor: default;\n position: relative;\n top: @cornerIconTopOffset;\n left: @cornerIconLeftOffset;\n font-size: @cornerIconSize;\n margin: 0em;\n}\n\n/* Left Corner */\n.ui.left.corner.label,\n.ui.left.corner.label:after {\n right: auto;\n left: 0em;\n}\n.ui.left.corner.label:after {\n border-top: @cornerTriangleSize solid transparent;\n border-right: @cornerTriangleSize solid transparent;\n border-bottom: 0em solid transparent;\n border-left: 0em solid transparent;\n\n border-top-color: inherit;\n}\n.ui.left.corner.label .icon {\n left: -@cornerIconLeftOffset;\n}\n\n/* Segment */\n.ui.segment > .ui.corner.label {\n top: -1px;\n right: -1px;\n}\n.ui.segment > .ui.left.corner.label {\n right: auto;\n left: -1px;\n}\n\n/*-------------------\n Ribbon\n--------------------*/\n\n.ui.ribbon.label {\n position: relative;\n margin: 0em;\n min-width: max-content;\n border-radius: 0em @borderRadius @borderRadius 0em;\n border-color: @ribbonShadowColor;\n}\n\n.ui.ribbon.label:after {\n position: absolute;\n content: '';\n\n top: 100%;\n left: 0%;\n background-color: transparent !important;\n\n border-style: solid;\n border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em;\n border-color: transparent;\n border-right-color: inherit;\n\n width: 0em;\n height: 0em;\n}\n/* Positioning */\n.ui.ribbon.label {\n left: @ribbonOffset;\n margin-right: -@ribbonTriangleSize;\n padding-left: @ribbonDistance;\n padding-right: @ribbonTriangleSize;\n}\n.ui[class*=\"right ribbon\"].label {\n left: @rightRibbonOffset;\n padding-left: @ribbonTriangleSize;\n padding-right: @ribbonDistance;\n}\n\n/* Right Ribbon */\n.ui[class*=\"right ribbon\"].label {\n text-align: left;\n transform: translateX(-100%);\n border-radius: @borderRadius 0em 0em @borderRadius;\n}\n.ui[class*=\"right ribbon\"].label:after {\n left: auto;\n right: 0%;\n\n border-style: solid;\n border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em;\n border-color: transparent;\n border-top-color: inherit;\n}\n\n/* Inside Table */\n.ui.image > .ribbon.label,\n.ui.card .image > .ribbon.label {\n position: absolute;\n top: @ribbonImageTopDistance;\n}\n.ui.card .image > .ui.ribbon.label,\n.ui.image > .ui.ribbon.label {\n left: @ribbonImageOffset;\n}\n.ui.card .image > .ui[class*=\"right ribbon\"].label,\n.ui.image > .ui[class*=\"right ribbon\"].label {\n left: @rightRibbonImageOffset;\n padding-left: @horizontalPadding;\n}\n\n/* Inside Table */\n.ui.table td > .ui.ribbon.label {\n left: @ribbonTableOffset;\n}\n.ui.table td > .ui[class*=\"right ribbon\"].label {\n left: @rightRibbonTableOffset;\n padding-left: @horizontalPadding;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n.ui[class*=\"top attached\"].label,\n.ui.attached.label {\n width: 100%;\n position: absolute;\n margin: 0em;\n top: 0em;\n left: 0em;\n\n padding: @attachedVerticalPadding @attachedHorizontalPadding;\n\n border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em;\n}\n.ui[class*=\"bottom attached\"].label {\n top: auto;\n bottom: 0em;\n border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius;\n}\n\n.ui[class*=\"top left attached\"].label {\n width: auto;\n margin-top: 0em !important;\n border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em;\n}\n\n.ui[class*=\"top right attached\"].label {\n width: auto;\n left: auto;\n right: 0em;\n border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius;\n}\n.ui[class*=\"bottom left attached\"].label {\n width: auto;\n top: auto;\n bottom: 0em;\n border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius;\n}\n.ui[class*=\"bottom right attached\"].label {\n top: auto;\n bottom: 0em;\n left: auto;\n right: 0em;\n width: auto;\n border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.label.disabled {\n opacity: 0.5;\n}\n\n/*-------------------\n Hover\n--------------------*/\n\na.ui.labels .label:hover,\na.ui.label:hover {\n background-color: @labelHoverBackgroundColor;\n border-color: @labelHoverBackgroundColor;\n\n background-image: @labelHoverBackgroundImage;\n color: @labelHoverTextColor;\n}\n.ui.labels a.label:hover:before,\na.ui.label:hover:before {\n color: @labelHoverTextColor;\n}\n\n/*-------------------\n Active\n--------------------*/\n\n.ui.active.label {\n background-color: @labelActiveBackgroundColor;\n border-color: @labelActiveBackgroundColor;\n\n background-image: @labelActiveBackgroundImage;\n color: @labelActiveTextColor;\n}\n.ui.active.label:before {\n background-color: @labelActiveBackgroundColor;\n background-image: @labelActiveBackgroundImage;\n color: @labelActiveTextColor;\n}\n\n/*-------------------\n Active Hover\n--------------------*/\n\na.ui.labels .active.label:hover,\na.ui.active.label:hover {\n background-color: @labelActiveHoverBackgroundColor;\n border-color: @labelActiveHoverBackgroundColor;\n\n background-image: @labelActiveHoverBackgroundImage;\n color: @labelActiveHoverTextColor;\n}\n.ui.labels a.active.label:ActiveHover:before,\na.ui.active.label:ActiveHover:before {\n background-color: @labelActiveHoverBackgroundColor;\n background-image: @labelActiveHoverBackgroundImage;\n color: @labelActiveHoverTextColor;\n}\n\n\n/*-------------------\n Visible\n--------------------*/\n\n.ui.labels.visible .label,\n.ui.label.visible:not(.dropdown) {\n display: inline-block !important;\n}\n\n/*-------------------\n Hidden\n--------------------*/\n\n.ui.labels.hidden .label,\n.ui.label.hidden {\n display: none !important;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Colors\n--------------------*/\n\n/*--- Red ---*/\n.ui.red.labels .label,\n.ui.red.label {\n background-color: @red !important;\n border-color: @red !important;\n color: @redTextColor !important;\n}\n/* Link */\n.ui.red.labels .label:hover,\na.ui.red.label:hover{\n background-color: @redHover !important;\n border-color: @redHover !important;\n color: @redHoverTextColor !important;\n}\n/* Corner */\n.ui.red.corner.label,\n.ui.red.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.red.ribbon.label {\n border-color: @redRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.red.label {\n background-color: @white !important;\n color: @red !important;\n border-color: @red !important;\n}\n.ui.basic.red.labels a.label:hover,\na.ui.basic.red.label:hover {\n background-color: @white !important;\n color: @redHover !important;\n border-color: @redHover !important;\n}\n\n/*--- Orange ---*/\n.ui.orange.labels .label,\n.ui.orange.label {\n background-color: @orange !important;\n border-color: @orange !important;\n color: @orangeTextColor !important;\n}\n/* Link */\n.ui.orange.labels .label:hover,\na.ui.orange.label:hover{\n background-color: @orangeHover !important;\n border-color: @orangeHover !important;\n color: @orangeHoverTextColor !important;\n}\n/* Corner */\n.ui.orange.corner.label,\n.ui.orange.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.orange.ribbon.label {\n border-color: @orangeRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.orange.label {\n background-color: @white !important;\n color: @orange !important;\n border-color: @orange !important;\n}\n.ui.basic.orange.labels a.label:hover,\na.ui.basic.orange.label:hover {\n background-color: @white !important;\n color: @orangeHover !important;\n border-color: @orangeHover !important;\n}\n\n/*--- Yellow ---*/\n.ui.yellow.labels .label,\n.ui.yellow.label {\n background-color: @yellow !important;\n border-color: @yellow !important;\n color: @yellowTextColor !important;\n}\n/* Link */\n.ui.yellow.labels .label:hover,\na.ui.yellow.label:hover{\n background-color: @yellowHover !important;\n border-color: @yellowHover !important;\n color: @yellowHoverTextColor !important;\n}\n/* Corner */\n.ui.yellow.corner.label,\n.ui.yellow.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.yellow.ribbon.label {\n border-color: @yellowRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.yellow.label {\n background-color: @white !important;\n color: @yellow !important;\n border-color: @yellow !important;\n}\n.ui.basic.yellow.labels a.label:hover,\na.ui.basic.yellow.label:hover {\n background-color: @white !important;\n color: @yellowHover !important;\n border-color: @yellowHover !important;\n}\n\n/*--- Olive ---*/\n.ui.olive.labels .label,\n.ui.olive.label {\n background-color: @olive !important;\n border-color: @olive !important;\n color: @oliveTextColor !important;\n}\n/* Link */\n.ui.olive.labels .label:hover,\na.ui.olive.label:hover{\n background-color: @oliveHover !important;\n border-color: @oliveHover !important;\n color: @oliveHoverTextColor !important;\n}\n/* Corner */\n.ui.olive.corner.label,\n.ui.olive.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.olive.ribbon.label {\n border-color: @greenRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.olive.label {\n background-color: @white !important;\n color: @olive !important;\n border-color: @olive !important;\n}\n.ui.basic.olive.labels a.label:hover,\na.ui.basic.olive.label:hover {\n background-color: @white !important;\n color: @oliveHover !important;\n border-color: @oliveHover !important;\n}\n\n/*--- Green ---*/\n.ui.green.labels .label,\n.ui.green.label {\n background-color: @green !important;\n border-color: @green !important;\n color: @greenTextColor !important;\n}\n/* Link */\n.ui.green.labels .label:hover,\na.ui.green.label:hover{\n background-color: @greenHover !important;\n border-color: @greenHover !important;\n color: @greenHoverTextColor !important;\n}\n/* Corner */\n.ui.green.corner.label,\n.ui.green.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.green.ribbon.label {\n border-color: @greenRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.green.label {\n background-color: @white !important;\n color: @green !important;\n border-color: @green !important;\n}\n.ui.basic.green.labels a.label:hover,\na.ui.basic.green.label:hover {\n background-color: @white !important;\n color: @greenHover !important;\n border-color: @greenHover !important;\n}\n\n/*--- Teal ---*/\n.ui.teal.labels .label,\n.ui.teal.label {\n background-color: @teal !important;\n border-color: @teal !important;\n color: @tealTextColor !important;\n}\n/* Link */\n.ui.teal.labels .label:hover,\na.ui.teal.label:hover{\n background-color: @tealHover !important;\n border-color: @tealHover !important;\n color: @tealHoverTextColor !important;\n}\n/* Corner */\n.ui.teal.corner.label,\n.ui.teal.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.teal.ribbon.label {\n border-color: @tealRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.teal.label {\n background-color: @white !important;\n color: @teal !important;\n border-color: @teal !important;\n}\n.ui.basic.teal.labels a.label:hover,\na.ui.basic.teal.label:hover {\n background-color: @white !important;\n color: @tealHover !important;\n border-color: @tealHover !important;\n}\n\n/*--- Blue ---*/\n.ui.blue.labels .label,\n.ui.blue.label {\n background-color: @blue !important;\n border-color: @blue !important;\n color: @blueTextColor !important;\n}\n/* Link */\n.ui.blue.labels .label:hover,\na.ui.blue.label:hover{\n background-color: @blueHover !important;\n border-color: @blueHover !important;\n color: @blueHoverTextColor !important;\n}\n/* Corner */\n.ui.blue.corner.label,\n.ui.blue.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.blue.ribbon.label {\n border-color: @blueRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.blue.label {\n background-color: @white !important;\n color: @blue !important;\n border-color: @blue !important;\n}\n.ui.basic.blue.labels a.label:hover,\na.ui.basic.blue.label:hover {\n background-color: @white !important;\n color: @blueHover !important;\n border-color: @blueHover !important;\n}\n\n/*--- Violet ---*/\n.ui.violet.labels .label,\n.ui.violet.label {\n background-color: @violet !important;\n border-color: @violet !important;\n color: @violetTextColor !important;\n}\n/* Link */\n.ui.violet.labels .label:hover,\na.ui.violet.label:hover{\n background-color: @violetHover !important;\n border-color: @violetHover !important;\n color: @violetHoverTextColor !important;\n}\n/* Corner */\n.ui.violet.corner.label,\n.ui.violet.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.violet.ribbon.label {\n border-color: @violetRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.violet.label {\n background-color: @white !important;\n color: @violet !important;\n border-color: @violet !important;\n}\n.ui.basic.violet.labels a.label:hover,\na.ui.basic.violet.label:hover {\n background-color: @white !important;\n color: @violetHover !important;\n border-color: @violetHover !important;\n}\n\n/*--- Purple ---*/\n.ui.purple.labels .label,\n.ui.purple.label {\n background-color: @purple !important;\n border-color: @purple !important;\n color: @purpleTextColor !important;\n}\n/* Link */\n.ui.purple.labels .label:hover,\na.ui.purple.label:hover{\n background-color: @purpleHover !important;\n border-color: @purpleHover !important;\n color: @purpleHoverTextColor !important;\n}\n/* Corner */\n.ui.purple.corner.label,\n.ui.purple.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.purple.ribbon.label {\n border-color: @purpleRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.purple.label {\n background-color: @white !important;\n color: @purple !important;\n border-color: @purple !important;\n}\n.ui.basic.purple.labels a.label:hover,\na.ui.basic.purple.label:hover {\n background-color: @white !important;\n color: @purpleHover !important;\n border-color: @purpleHover !important;\n}\n\n/*--- Pink ---*/\n.ui.pink.labels .label,\n.ui.pink.label {\n background-color: @pink !important;\n border-color: @pink !important;\n color: @pinkTextColor !important;\n}\n/* Link */\n.ui.pink.labels .label:hover,\na.ui.pink.label:hover{\n background-color: @pinkHover !important;\n border-color: @pinkHover !important;\n color: @pinkHoverTextColor !important;\n}\n/* Corner */\n.ui.pink.corner.label,\n.ui.pink.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.pink.ribbon.label {\n border-color: @pinkRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.pink.label {\n background-color: @white !important;\n color: @pink !important;\n border-color: @pink !important;\n}\n.ui.basic.pink.labels a.label:hover,\na.ui.basic.pink.label:hover {\n background-color: @white !important;\n color: @pinkHover !important;\n border-color: @pinkHover !important;\n}\n\n/*--- Brown ---*/\n.ui.brown.labels .label,\n.ui.brown.label {\n background-color: @brown !important;\n border-color: @brown !important;\n color: @brownTextColor !important;\n}\n/* Link */\n.ui.brown.labels .label:hover,\na.ui.brown.label:hover{\n background-color: @brownHover !important;\n border-color: @brownHover !important;\n color: @brownHoverTextColor !important;\n}\n/* Corner */\n.ui.brown.corner.label,\n.ui.brown.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.brown.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.brown.label {\n background-color: @white !important;\n color: @brown !important;\n border-color: @brown !important;\n}\n.ui.basic.brown.labels a.label:hover,\na.ui.basic.brown.label:hover {\n background-color: @white !important;\n color: @brownHover !important;\n border-color: @brownHover !important;\n}\n\n/*--- Grey ---*/\n.ui.grey.labels .label,\n.ui.grey.label {\n background-color: @grey !important;\n border-color: @grey !important;\n color: @greyTextColor !important;\n}\n/* Link */\n.ui.grey.labels .label:hover,\na.ui.grey.label:hover{\n background-color: @greyHover !important;\n border-color: @greyHover !important;\n color: @greyHoverTextColor !important;\n}\n/* Corner */\n.ui.grey.corner.label,\n.ui.grey.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.grey.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.grey.label {\n background-color: @white !important;\n color: @grey !important;\n border-color: @grey !important;\n}\n.ui.basic.grey.labels a.label:hover,\na.ui.basic.grey.label:hover {\n background-color: @white !important;\n color: @greyHover !important;\n border-color: @greyHover !important;\n}\n\n/*--- Black ---*/\n.ui.black.labels .label,\n.ui.black.label {\n background-color: @black !important;\n border-color: @black !important;\n color: @blackTextColor !important;\n}\n/* Link */\n.ui.black.labels .label:hover,\na.ui.black.label:hover{\n background-color: @blackHover !important;\n border-color: @blackHover !important;\n color: @blackHoverTextColor !important;\n}\n/* Corner */\n.ui.black.corner.label,\n.ui.black.corner.label:hover {\n background-color: transparent !important;\n}\n/* Ribbon */\n.ui.black.ribbon.label {\n border-color: @brownRibbonShadow !important;\n}\n/* Basic */\n.ui.basic.black.label {\n background-color: @white !important;\n color: @black !important;\n border-color: @black !important;\n}\n.ui.basic.black.labels a.label:hover,\na.ui.basic.black.label:hover {\n background-color: @white !important;\n color: @blackHover !important;\n border-color: @blackHover !important;\n}\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.label {\n background: @basicBackground;\n border: @basicBorder;\n color: @basicColor;\n box-shadow: @basicBoxShadow;\n}\n\n/* Link */\na.ui.basic.label:hover {\n text-decoration: none;\n background: @basicHoverBackground;\n color: @basicHoverColor;\n box-shadow: @basicHoverBorder;\n box-shadow: @basicHoverBoxShadow;\n}\n\n/* Pointing */\n.ui.basic.pointing.label:before {\n border-color: inherit;\n}\n\n\n/*-------------------\n Fluid\n--------------------*/\n\n.ui.label.fluid,\n.ui.fluid.labels > .label {\n width: 100%;\n box-sizing: border-box;\n}\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.labels .label,\n.ui.inverted.label {\n color: @invertedTextColor !important;\n}\n\n/*-------------------\n Horizontal\n--------------------*/\n\n.ui.horizontal.labels .label,\n.ui.horizontal.label {\n margin: 0em @horizontalLabelMargin 0em 0em;\n\n padding: @horizontalLabelVerticalPadding @horizontalPadding;\n min-width: @horizontalLabelMinWidth;\n text-align: center;\n}\n\n\n/*-------------------\n Circular\n--------------------*/\n\n.ui.circular.labels .label,\n.ui.circular.label {\n min-width: @circularMinSize;\n min-height: @circularMinSize;\n\n padding: @circularPadding !important;\n\n line-height: 1em;\n text-align: center;\n border-radius: @circularRadius;\n}\n.ui.empty.circular.labels .label,\n.ui.empty.circular.label {\n min-width: 0em;\n min-height: 0em;\n overflow: hidden;\n width: @emptyCircleSize;\n height: @emptyCircleSize;\n vertical-align: baseline;\n}\n\n/*-------------------\n Pointing\n--------------------*/\n\n.ui.pointing.label {\n position: relative;\n}\n\n.ui.attached.pointing.label {\n position: absolute;\n}\n\n.ui.pointing.label:before {\n background-color: inherit;\n background-image: inherit;\n border-width: none;\n border-style: solid;\n border-color: @pointingBorderColor;\n}\n/* Arrow */\n.ui.pointing.label:before {\n position: absolute;\n content: '';\n transform: rotate(45deg);\n background-image: none;\n\n z-index: @pointingTriangleZIndex;\n width: @pointingTriangleSize;\n height: @pointingTriangleSize;\n transition: @pointingTriangleTransition;\n}\n\n/*--- Above ---*/\n.ui.pointing.label,\n.ui[class*=\"pointing above\"].label {\n margin-top: @pointingVerticalDistance;\n}\n.ui.pointing.label:before,\n.ui[class*=\"pointing above\"].label:before {\n border-width: @borderWidth 0px 0px @borderWidth;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 0%;\n left: 50%;\n}\n/*--- Below ---*/\n.ui[class*=\"bottom pointing\"].label,\n.ui[class*=\"pointing below\"].label {\n margin-top: 0em;\n margin-bottom: @pointingVerticalDistance;\n}\n.ui[class*=\"bottom pointing\"].label:before,\n.ui[class*=\"pointing below\"].label:before {\n border-width: 0px @borderWidth @borderWidth 0px;\n top: auto;\n right: auto;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 100%;\n left: 50%;\n}\n/*--- Left ---*/\n.ui[class*=\"left pointing\"].label {\n margin-top: 0em;\n margin-left: @pointingHorizontalDistance;\n}\n.ui[class*=\"left pointing\"].label:before {\n border-width: 0px 0px @borderWidth @borderWidth;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n bottom: auto;\n right: auto;\n top: 50%;\n left: 0em;\n}\n/*--- Right ---*/\n.ui[class*=\"right pointing\"].label {\n margin-top: 0em;\n margin-right: @pointingHorizontalDistance;\n}\n.ui[class*=\"right pointing\"].label:before {\n border-width: @borderWidth @borderWidth 0px 0px;\n transform: translateX(50%) translateY(-50%) rotate(45deg);\n top: 50%;\n right: 0%;\n bottom: auto;\n left: auto;\n}\n\n/* Basic Pointing */\n\n/*--- Above ---*/\n.ui.basic.pointing.label:before,\n.ui.basic[class*=\"pointing above\"].label:before {\n margin-top: @basicPointingTriangleOffset;\n}\n/*--- Below ---*/\n.ui.basic[class*=\"bottom pointing\"].label:before,\n.ui.basic[class*=\"pointing below\"].label:before {\n bottom: auto;\n top: 100%;\n margin-top: -@basicPointingTriangleOffset;\n}\n/*--- Left ---*/\n.ui.basic[class*=\"left pointing\"].label:before {\n top: 50%;\n left: @basicPointingTriangleOffset;\n}\n/*--- Right ---*/\n.ui.basic[class*=\"right pointing\"].label:before {\n top: 50%;\n right: @basicPointingTriangleOffset;\n}\n\n\n/*------------------\n Floating Label\n-------------------*/\n\n.ui.floating.label {\n position: absolute;\n z-index: @floatingZIndex;\n top: @floatingTopOffset;\n left: 100%;\n margin: 0em 0em 0em @floatingLeftOffset !important;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.labels .label,\n.ui.mini.label {\n font-size: @mini;\n}\n.ui.tiny.labels .label,\n.ui.tiny.label {\n font-size: @tiny;\n}\n.ui.small.labels .label,\n.ui.small.label {\n font-size: @small;\n}\n.ui.labels .label,\n.ui.label {\n font-size: @medium;\n}\n.ui.large.labels .label,\n.ui.large.label {\n font-size: @large;\n}\n.ui.big.labels .label,\n.ui.big.label {\n font-size: @big;\n}\n.ui.huge.labels .label,\n.ui.huge.label {\n font-size: @huge;\n}\n.ui.massive.labels .label,\n.ui.massive.label {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/list.less", "content": "/*!\n * # Semantic UI - List\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'list';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n List\n*******************************/\n\nul.ui.list,\nol.ui.list,\n.ui.list {\n list-style-type: @listStyleType;\n margin: @margin;\n padding: @verticalPadding @horizontalPadding;\n}\n\nul.ui.list:first-child,\nol.ui.list:first-child,\n.ui.list:first-child {\n margin-top: 0em;\n padding-top: 0em;\n}\n\nul.ui.list:last-child,\nol.ui.list:last-child,\n.ui.list:last-child {\n margin-bottom: 0em;\n padding-bottom: 0em;\n}\n\n/*******************************\n Content\n*******************************/\n\n/* List Item */\nul.ui.list li,\nol.ui.list li,\n.ui.list > .item,\n.ui.list .list > .item {\n display: list-item;\n table-layout: fixed;\n list-style-type: @listStyleType;\n list-style-position: @listStylePosition;\n\n padding: @itemPadding;\n line-height: @itemLineHeight;\n}\n\nul.ui.list > li:first-child:after,\nol.ui.list > li:first-child:after,\n.ui.list > .list > .item,\n.ui.list > .item:after {\n content: '';\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\nul.ui.list li:first-child,\nol.ui.list li:first-child,\n.ui.list .list > .item:first-child,\n.ui.list > .item:first-child {\n padding-top: 0em;\n}\nul.ui.list li:last-child,\nol.ui.list li:last-child,\n.ui.list .list > .item:last-child,\n.ui.list > .item:last-child {\n padding-bottom: 0em;\n}\n\n/* Child List */\nul.ui.list ul,\nol.ui.list ol,\n.ui.list .list {\n clear: both;\n margin: 0em;\n padding: @childListPadding;\n}\n\n/* Child Item */\nul.ui.list ul li,\nol.ui.list ol li,\n.ui.list .list > .item {\n padding: @childItemPadding;\n line-height: @childItemLineHeight;\n}\n\n\n/* Icon */\n.ui.list .list > .item > i.icon,\n.ui.list > .item > i.icon {\n display: table-cell;\n margin: 0em;\n padding-top: @iconOffset;\n padding-right: @iconDistance;\n vertical-align: @iconContentVerticalAlign;\n transition: @iconTransition;\n}\n.ui.list .list > .item > i.icon:only-child,\n.ui.list > .item > i.icon:only-child {\n display: inline-block;\n vertical-align: @iconVerticalAlign;\n}\n\n\n/* Image */\n.ui.list .list > .item > .image,\n.ui.list > .item > .image {\n display: table-cell;\n background-color: transparent;\n margin: 0em;\n vertical-align: @imageAlign;\n}\n.ui.list .list > .item > .image:not(:only-child):not(img),\n.ui.list > .item > .image:not(:only-child):not(img) {\n padding-right: @imageDistance;\n}\n.ui.list .list > .item > .image img,\n.ui.list > .item > .image img {\n vertical-align: @imageAlign;\n}\n\n.ui.list .list > .item > img.image,\n.ui.list .list > .item > .image:only-child,\n.ui.list > .item > img.image,\n.ui.list > .item > .image:only-child {\n display: inline-block;\n}\n\n/* Content */\n.ui.list .list > .item > .content,\n.ui.list > .item > .content {\n line-height: @contentLineHeight;\n}\n.ui.list .list > .item > .image + .content,\n.ui.list .list > .item > .icon + .content,\n.ui.list > .item > .image + .content,\n.ui.list > .item > .icon + .content {\n display: table-cell;\n padding: 0em 0em 0em @contentDistance;\n vertical-align: @contentVerticalAlign;\n}\n.ui.list .list > .item > img.image + .content,\n.ui.list > .item > img.image + .content {\n display: inline-block;\n}\n.ui.list .list > .item > .content > .list,\n.ui.list > .item > .content > .list {\n margin-left: 0em;\n padding-left: 0em;\n}\n\n/* Header */\n.ui.list .list > .item .header,\n.ui.list > .item .header {\n display: block;\n margin: 0em;\n font-family: @itemHeaderFontFamily;\n font-weight: @itemHeaderFontWeight;\n color: @itemHeaderColor;\n}\n\n/* Description */\n.ui.list .list > .item .description,\n.ui.list > .item .description {\n display: block;\n color: @itemDescriptionColor;\n}\n\n/* Child Link */\n.ui.list > .item a,\n.ui.list .list > .item a {\n cursor: pointer;\n}\n\n/* Linking Item */\n.ui.list .list > a.item,\n.ui.list > a.item {\n cursor: pointer;\n color: @itemLinkColor;\n}\n.ui.list .list > a.item:hover,\n.ui.list > a.item:hover {\n color: @itemLinkHoverColor;\n}\n\n/* Linked Item Icons */\n.ui.list .list > a.item i.icon,\n.ui.list > a.item i.icon {\n color: @itemLinkIconColor;\n}\n\n/* Header Link */\n.ui.list .list > .item a.header,\n.ui.list > .item a.header {\n cursor: pointer;\n color: @itemHeaderLinkColor !important;\n}\n.ui.list .list > .item a.header:hover,\n.ui.list > .item a.header:hover {\n color: @itemHeaderLinkHoverColor !important;\n}\n\n/* Floated Content */\n.ui[class*=\"left floated\"].list {\n float: left;\n}\n.ui[class*=\"right floated\"].list {\n float: right;\n}\n\n.ui.list .list > .item [class*=\"left floated\"],\n.ui.list > .item [class*=\"left floated\"] {\n float: left;\n margin: @leftFloatMargin;\n}\n.ui.list .list > .item [class*=\"right floated\"],\n.ui.list > .item [class*=\"right floated\"] {\n float: right;\n margin: @rightFloatMargin;\n}\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.menu .ui.list > .item,\n.ui.menu .ui.list .list > .item {\n display: list-item;\n table-layout: fixed;\n background-color: transparent;\n\n list-style-type: @listStyleType;\n list-style-position: @listStylePosition;\n\n padding: @itemVerticalPadding @itemHorizontalPadding;\n line-height: @itemLineHeight;\n}\n.ui.menu .ui.list .list > .item:before,\n.ui.menu .ui.list > .item:before {\n border: none;\n background: none;\n}\n.ui.menu .ui.list .list > .item:first-child,\n.ui.menu .ui.list > .item:first-child {\n padding-top: 0em;\n}\n.ui.menu .ui.list .list > .item:last-child,\n.ui.menu .ui.list > .item:last-child {\n padding-bottom: 0em;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Horizontal\n--------------------*/\n\n.ui.horizontal.list {\n display: inline-block;\n font-size: 0em;\n}\n.ui.horizontal.list > .item {\n display: inline-block;\n margin-left: @horizontalSpacing;\n font-size: 1rem;\n}\n.ui.horizontal.list:not(.celled) > .item:first-child {\n margin-left: 0em !important;\n padding-left: 0em !important;\n}\n.ui.horizontal.list .list {\n padding-left: 0em;\n padding-bottom: 0em;\n}\n\n.ui.horizontal.list > .item > .image,\n.ui.horizontal.list .list > .item > .image,\n.ui.horizontal.list > .item > .icon,\n.ui.horizontal.list .list > .item > .icon,\n.ui.horizontal.list > .item > .content,\n.ui.horizontal.list .list > .item > .content {\n vertical-align: @horizontalVerticalAlign;\n}\n\n/* Padding on all elements */\n.ui.horizontal.list > .item:first-child,\n.ui.horizontal.list > .item:last-child {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Horizontal List */\n.ui.horizontal.list > .item > i.icon {\n margin: 0em;\n padding: 0em @horizontalIconDistance 0em 0em;\n}\n.ui.horizontal.list > .item > .icon,\n.ui.horizontal.list > .item > .icon + .content {\n float: none;\n display: inline-block;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*-------------------\n Disabled\n--------------------*/\n\n.ui.list .list > .disabled.item,\n.ui.list > .disabled.item {\n pointer-events: none;\n color: @disabledColor !important;\n}\n.ui.inverted.list .list > .disabled.item,\n.ui.inverted.list > .disabled.item {\n color: @invertedDisabledColor !important;\n}\n\n/*-------------------\n Hover\n--------------------*/\n\n.ui.list .list > a.item:hover .icon,\n.ui.list > a.item:hover .icon {\n color: @itemLinkIconHoverColor;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.list .list > a.item > .icon,\n.ui.inverted.list > a.item > .icon {\n color: @invertedIconLinkColor;\n}\n.ui.inverted.list .list > .item .header,\n.ui.inverted.list > .item .header {\n color: @invertedHeaderColor;\n}\n.ui.inverted.list .list > .item .description,\n.ui.inverted.list > .item .description {\n color: @invertedDescriptionColor;\n}\n\n/* Item Link */\n.ui.inverted.list .list > a.item,\n.ui.inverted.list > a.item {\n cursor: pointer;\n color: @invertedItemLinkColor;\n}\n.ui.inverted.list .list > a.item:hover,\n.ui.inverted.list > a.item:hover {\n color: @invertedItemLinkHoverColor;\n}\n\n\n/* Linking Content */\n.ui.inverted.list .item a:not(.ui) {\n color: @invertedItemLinkColor !important;\n}\n.ui.inverted.list .item a:not(.ui):hover {\n color: @invertedItemLinkHoverColor !important;\n}\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui.list[class*=\"top aligned\"] .image,\n.ui.list[class*=\"top aligned\"] .content,\n.ui.list [class*=\"top aligned\"] {\n vertical-align: top !important;\n}\n.ui.list[class*=\"middle aligned\"] .image,\n.ui.list[class*=\"middle aligned\"] .content,\n.ui.list [class*=\"middle aligned\"] {\n vertical-align: middle !important;\n}\n.ui.list[class*=\"bottom aligned\"] .image,\n.ui.list[class*=\"bottom aligned\"] .content,\n.ui.list [class*=\"bottom aligned\"] {\n vertical-align: bottom !important;\n}\n\n/*-------------------\n Link\n--------------------*/\n\n.ui.link.list .item,\n.ui.link.list a.item,\n.ui.link.list .item a:not(.ui) {\n color: @linkListItemColor;\n transition: @linkListTransition;\n}\n.ui.link.list.list a.item:hover,\n.ui.link.list.list .item a:not(.ui):hover {\n color: @linkListItemHoverColor;\n}\n.ui.link.list.list a.item:active,\n.ui.link.list.list .item a:not(.ui):active {\n color: @linkListItemDownColor;\n}\n.ui.link.list.list .active.item,\n.ui.link.list.list .active.item a:not(.ui) {\n color: @linkListItemActiveColor;\n}\n\n/* Inverted */\n.ui.inverted.link.list .item,\n.ui.inverted.link.list a.item,\n.ui.inverted.link.list .item a:not(.ui) {\n color: @invertedLinkListItemColor;\n}\n.ui.inverted.link.list.list a.item:hover,\n.ui.inverted.link.list.list .item a:not(.ui):hover {\n color: @invertedLinkListItemHoverColor;\n}\n.ui.inverted.link.list.list a.item:active,\n.ui.inverted.link.list.list .item a:not(.ui):active {\n color: @invertedLinkListItemDownColor;\n}\n.ui.inverted.link.list.list a.active.item,\n.ui.inverted.link.list.list .active.item a:not(.ui) {\n color: @invertedLinkListItemActiveColor;\n}\n\n/*-------------------\n Selection\n--------------------*/\n\n.ui.selection.list .list > .item,\n.ui.selection.list > .item {\n cursor: pointer;\n background: @selectionListBackground;\n padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding;\n margin: @selectionListItemMargin;\n color: @selectionListColor;\n border-radius: @selectionListItemBorderRadius;\n transition: @selectionListTransition;\n}\n.ui.selection.list .list > .item:last-child,\n.ui.selection.list > .item:last-child {\n margin-bottom: 0em;\n}\n.ui.selection.list.list > .item:hover,\n.ui.selection.list > .item:hover {\n background: @selectionListHoverBackground;\n color: @selectionListHoverColor;\n}\n.ui.selection.list .list > .item:active,\n.ui.selection.list > .item:active {\n background: @selectionListDownBackground;\n color: @selectionListDownColor;\n}\n.ui.selection.list .list > .item.active,\n.ui.selection.list > .item.active {\n background: @selectionListActiveBackground;\n color: @selectionListActiveColor;\n}\n\n/* Inverted */\n.ui.inverted.selection.list > .item,\n.ui.inverted.selection.list > .item {\n background: @invertedSelectionListBackground;\n color: @invertedSelectionListColor;\n}\n.ui.inverted.selection.list > .item:hover,\n.ui.inverted.selection.list > .item:hover {\n background: @invertedSelectionListHoverBackground;\n color: @invertedSelectionListHoverColor;\n}\n.ui.inverted.selection.list > .item:active,\n.ui.inverted.selection.list > .item:active {\n background: @invertedSelectionListDownBackground;\n color: @invertedSelectionListDownColor;\n}\n.ui.inverted.selection.list > .item.active,\n.ui.inverted.selection.list > .item.active {\n background: @invertedSelectionListActiveBackground;\n color: @invertedSelectionListActiveColor;\n}\n\n/* Celled / Divided Selection List */\n.ui.celled.selection.list .list > .item,\n.ui.divided.selection.list .list > .item,\n.ui.celled.selection.list > .item,\n.ui.divided.selection.list > .item {\n border-radius: 0em;\n}\n\n/*-------------------\n Animated\n--------------------*/\n\n.ui.animated.list > .item {\n transition: @animatedListTransition;\n}\n.ui.animated.list:not(.horizontal) > .item:hover {\n padding-left: @animatedListIndent;\n}\n\n/*-------------------\n Fitted\n--------------------*/\n.ui.fitted.list:not(.selection) .list > .item,\n.ui.fitted.list:not(.selection) > .item {\n padding-left: 0em;\n padding-right: 0em;\n}\n.ui.fitted.selection.list .list > .item,\n.ui.fitted.selection.list > .item {\n margin-left: -@selectionListItemHorizontalPadding;\n margin-right: -@selectionListItemHorizontalPadding;\n}\n\n/*-------------------\n Bulleted\n--------------------*/\n\nul.ui.list,\n.ui.bulleted.list {\n margin-left: @bulletDistance;\n}\nul.ui.list li,\n.ui.bulleted.list .list > .item,\n.ui.bulleted.list > .item {\n position: relative;\n}\nul.ui.list li:before,\n.ui.bulleted.list .list > .item:before,\n.ui.bulleted.list > .item:before {\n user-select: none;\n pointer-events: none;\n position: absolute;\n top: auto;\n left: auto;\n font-weight: @normal;\n margin-left: @bulletOffset;\n content: @bulletCharacter;\n opacity: @bulletOpacity;\n color: @bulletColor;\n vertical-align: @bulletVerticalAlign;\n}\n\nul.ui.list li:before,\n.ui.bulleted.list .list > a.item:before,\n.ui.bulleted.list > a.item:before {\n color: @bulletLinkColor;\n}\n\nul.ui.list ul,\n.ui.bulleted.list .list {\n padding-left: @bulletChildDistance;\n}\n\n/* Horizontal Bulleted */\nul.ui.horizontal.bulleted.list,\n.ui.horizontal.bulleted.list {\n margin-left: 0em;\n}\nul.ui.horizontal.bulleted.list li,\n.ui.horizontal.bulleted.list > .item {\n margin-left: @horizontalBulletSpacing;\n}\nul.ui.horizontal.bulleted.list li:first-child,\n.ui.horizontal.bulleted.list > .item:first-child {\n margin-left: 0em;\n}\nul.ui.horizontal.bulleted.list li::before,\n.ui.horizontal.bulleted.list > .item::before {\n color: @horizontalBulletColor;\n}\nul.ui.horizontal.bulleted.list li:first-child::before,\n.ui.horizontal.bulleted.list > .item:first-child::before {\n display: none;\n}\n\n/*-------------------\n Ordered\n--------------------*/\n\nol.ui.list,\n.ui.ordered.list,\n.ui.ordered.list .list,\nol.ui.list ol {\n counter-reset: ordered;\n margin-left: @orderedCountDistance;\n list-style-type: none;\n}\nol.ui.list li,\n.ui.ordered.list .list > .item,\n.ui.ordered.list > .item {\n list-style-type: none;\n position: relative;\n}\nol.ui.list li:before,\n.ui.ordered.list .list > .item:before,\n.ui.ordered.list > .item:before {\n position: absolute;\n top: auto;\n left: auto;\n user-select: none;\n pointer-events: none;\n margin-left: -(@orderedCountDistance);\n counter-increment: @orderedCountName;\n content: @orderedCountContent;\n text-align: @orderedCountTextAlign;\n color: @orderedCountColor;\n vertical-align: @orderedCountVerticalAlign;\n opacity: @orderedCountOpacity;\n}\n\nol.ui.inverted.list li:before,\n.ui.ordered.inverted.list .list > .item:before,\n.ui.ordered.inverted.list > .item:before {\n color: @orderedInvertedCountColor;\n}\n\n/* Value */\n.ui.ordered.list > .list > .item[data-value],\n.ui.ordered.list > .item[data-value] {\n content: attr(data-value);\n}\nol.ui.list li[value]:before {\n content: attr(value);\n}\n\n/* Child Lists */\nol.ui.list ol,\n.ui.ordered.list .list {\n margin-left: @orderedChildCountDistance;\n}\nol.ui.list ol li:before,\n.ui.ordered.list .list > .item:before {\n margin-left: @orderedChildCountOffset;\n}\n\n/* Horizontal Ordered */\nol.ui.horizontal.list,\n.ui.ordered.horizontal.list {\n margin-left: 0em;\n}\nol.ui.horizontal.list li:before,\n.ui.ordered.horizontal.list .list > .item:before,\n.ui.ordered.horizontal.list > .item:before {\n position: static;\n margin: 0em @horizontalOrderedCountDistance 0em 0em;\n}\n\n/*-------------------\n Divided\n--------------------*/\n\n.ui.divided.list > .item {\n border-top: @dividedBorder;\n}\n.ui.divided.list .list > .item {\n border-top: @dividedChildListBorder;\n}\n.ui.divided.list .item .list > .item {\n border-top: @dividedChildItemBorder;\n}\n.ui.divided.list .list > .item:first-child,\n.ui.divided.list > .item:first-child {\n border-top: none;\n}\n\n/* Sub Menu */\n.ui.divided.list:not(.horizontal) .list > .item:first-child {\n border-top-width: @dividedBorderWidth;\n}\n\n/* Divided bulleted */\n.ui.divided.bulleted.list:not(.horizontal),\n.ui.divided.bulleted.list .list {\n margin-left: 0em;\n padding-left: 0em;\n}\n.ui.divided.bulleted.list > .item:not(.horizontal) {\n padding-left: @bulletDistance;\n}\n\n/* Divided Ordered */\n.ui.divided.ordered.list {\n margin-left: 0em;\n}\n.ui.divided.ordered.list .list > .item,\n.ui.divided.ordered.list > .item {\n padding-left: @orderedCountDistance;\n}\n.ui.divided.ordered.list .item .list {\n margin-left: 0em;\n margin-right: 0em;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.divided.ordered.list .item .list > .item {\n padding-left: @orderedChildCountDistance;\n}\n\n/* Divided Selection */\n.ui.divided.selection.list .list > .item,\n.ui.divided.selection.list > .item {\n margin: 0em;\n border-radius: 0em;\n}\n\n/* Divided horizontal */\n.ui.divided.horizontal.list {\n margin-left: 0em;\n}\n.ui.divided.horizontal.list > .item:not(:first-child) {\n padding-left: @horizontalDividedSpacing;\n}\n.ui.divided.horizontal.list > .item:not(:last-child) {\n padding-right: @horizontalDividedSpacing;\n}\n.ui.divided.horizontal.list > .item {\n border-top: none;\n border-left: @dividedBorder;\n margin: 0em;\n line-height: @horizontalDividedLineHeight;\n}\n.ui.horizontal.divided.list > .item:first-child {\n border-left: none;\n}\n/* Inverted */\n.ui.divided.inverted.list > .item,\n.ui.divided.inverted.list > .list,\n.ui.divided.inverted.horizontal.list > .item {\n border-color: @dividedInvertedBorderColor;\n}\n\n\n/*-------------------\n Celled\n--------------------*/\n\n.ui.celled.list > .item,\n.ui.celled.list > .list {\n border-top: @celledBorder;\n padding-left: @celledHorizontalPadding;\n padding-right: @celledHorizontalPadding;\n}\n.ui.celled.list > .item:last-child {\n border-bottom: @celledBorder;\n}\n\n/* Padding on all elements */\n.ui.celled.list > .item:first-child,\n.ui.celled.list > .item:last-child {\n padding-top: @itemVerticalPadding;\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Sub Menu */\n.ui.celled.list .item .list > .item {\n border-width: 0px;\n}\n.ui.celled.list .list > .item:first-child {\n border-top-width: 0px;\n}\n\n/* Celled Bulleted */\n.ui.celled.bulleted.list {\n margin-left: 0em;\n}\n.ui.celled.bulleted.list .list > .item,\n.ui.celled.bulleted.list > .item {\n padding-left: (@bulletDistance);\n}\n.ui.celled.bulleted.list .item .list {\n margin-left: -(@bulletDistance);\n margin-right: -(@bulletDistance);\n padding-bottom: @itemVerticalPadding;\n}\n\n/* Celled Ordered */\n.ui.celled.ordered.list {\n margin-left: 0em;\n}\n.ui.celled.ordered.list .list > .item,\n.ui.celled.ordered.list > .item {\n padding-left: @orderedCountDistance;\n}\n.ui.celled.ordered.list .item .list {\n margin-left: 0em;\n margin-right: 0em;\n padding-bottom: @itemVerticalPadding;\n}\n.ui.celled.ordered.list .list > .item {\n padding-left: @orderedChildCountDistance;\n}\n\n/* Celled Horizontal */\n.ui.horizontal.celled.list {\n margin-left: 0em;\n}\n.ui.horizontal.celled.list .list > .item,\n.ui.horizontal.celled.list > .item {\n border-top: none;\n border-left: @celledBorder;\n margin: 0em;\n padding-left: @horizontalCelledSpacing;\n padding-right: @horizontalCelledSpacing;\n\n line-height: @horizontalCelledLineHeight;\n}\n.ui.horizontal.celled.list .list > .item:last-child,\n.ui.horizontal.celled.list > .item:last-child {\n border-bottom: none;\n border-right: @celledBorder;\n}\n\n/* Inverted */\n.ui.celled.inverted.list > .item,\n.ui.celled.inverted.list > .list {\n border-color: @celledInvertedBorder;\n}\n.ui.celled.inverted.horizontal.list .list > .item,\n.ui.celled.inverted.horizontal.list > .item {\n border-color: @celledInvertedBorder;\n}\n\n/*-------------------\n Relaxed\n--------------------*/\n\n.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {\n padding-top: @relaxedItemVerticalPadding;\n}\n.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {\n padding-bottom: @relaxedItemVerticalPadding;\n}\n.ui.horizontal.relaxed.list .list > .item:not(:first-child),\n.ui.horizontal.relaxed.list > .item:not(:first-child) {\n padding-left: @relaxedHorizontalPadding;\n}\n.ui.horizontal.relaxed.list .list > .item:not(:last-child),\n.ui.horizontal.relaxed.list > .item:not(:last-child) {\n padding-right: @relaxedHorizontalPadding;\n}\n\n/* Very Relaxed */\n.ui[class*=\"very relaxed\"].list:not(.horizontal) > .item:not(:first-child) {\n padding-top: @veryRelaxedItemVerticalPadding;\n}\n.ui[class*=\"very relaxed\"].list:not(.horizontal) > .item:not(:last-child) {\n padding-bottom: @veryRelaxedItemVerticalPadding;\n}\n.ui.horizontal[class*=\"very relaxed\"].list .list > .item:not(:first-child),\n.ui.horizontal[class*=\"very relaxed\"].list > .item:not(:first-child) {\n padding-left: @veryRelaxedHorizontalPadding;\n}\n.ui.horizontal[class*=\"very relaxed\"].list .list > .item:not(:last-child),\n.ui.horizontal[class*=\"very relaxed\"].list > .item:not(:last-child) {\n padding-right: @veryRelaxedHorizontalPadding;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n.ui.mini.list {\n font-size: @relativeMini;\n}\n.ui.tiny.list {\n font-size: @relativeTiny;\n}\n.ui.small.list {\n font-size: @relativeSmall;\n}\n.ui.list {\n font-size: @relativeMedium;\n}\n.ui.large.list {\n font-size: @relativeLarge;\n}\n.ui.big.list {\n font-size: @relativeBig;\n}\n.ui.huge.list {\n font-size: @relativeHuge;\n}\n.ui.massive.list {\n font-size: @relativeMassive;\n}\n\n.ui.mini.horizontal.list .list > .item,\n.ui.mini.horizontal.list > .item {\n font-size: @mini;\n}\n.ui.tiny.horizontal.list .list > .item,\n.ui.tiny.horizontal.list > .item {\n font-size: @tiny;\n}\n.ui.small.horizontal.list .list > .item,\n.ui.small.horizontal.list > .item {\n font-size: @small;\n}\n.ui.horizontal.list .list > .item,\n.ui.horizontal.list > .item {\n font-size: @medium;\n}\n.ui.large.horizontal.list .list > .item,\n.ui.large.horizontal.list > .item {\n font-size: @large;\n}\n.ui.big.horizontal.list .list > .item,\n.ui.big.horizontal.list > .item {\n font-size: @big;\n}\n.ui.huge.horizontal.list .list > .item,\n.ui.huge.horizontal.list > .item {\n font-size: @huge;\n}\n.ui.massive.horizontal.list .list > .item,\n.ui.massive.horizontal.list > .item {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n\n" }, { "path": "semantic/src/definitions/elements/loader.less", "content": "/*!\n * # Semantic UI - Loader\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'loader';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Loader\n*******************************/\n\n\n/* Standard Size */\n.ui.loader {\n display: none;\n position: absolute;\n top: @loaderTopOffset;\n left: @loaderLeftOffset;\n margin: 0px;\n text-align: center;\n z-index: 1000;\n transform: translateX(-50%) translateY(-50%);\n}\n\n/* Static Shape */\n.ui.loader:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 50%;\n width: 100%;\n height: 100%;\n\n border-radius: @circularRadius;\n border: @loaderLineWidth solid @loaderFillColor;\n}\n\n/* Active Shape */\n.ui.loader:after {\n position: absolute;\n content: '';\n top: 0%;\n left: 50%;\n width: 100%;\n height: 100%;\n\n animation: loader @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @shapeBorderColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n}\n\n/* Active Animation */\n@keyframes loader {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Sizes */\n.ui.mini.loader:before,\n.ui.mini.loader:after {\n width: @mini;\n height: @mini;\n margin: @miniOffset;\n}\n.ui.tiny.loader:before,\n.ui.tiny.loader:after {\n width: @tiny;\n height: @tiny;\n margin: @tinyOffset;\n}\n.ui.small.loader:before,\n.ui.small.loader:after {\n width: @small;\n height: @small;\n margin: @smallOffset;\n}\n.ui.loader:before,\n.ui.loader:after {\n width: @medium;\n height: @medium;\n margin: @mediumOffset;\n}\n.ui.large.loader:before,\n.ui.large.loader:after {\n width: @large;\n height: @large;\n margin: @largeOffset;\n}\n.ui.big.loader:before,\n.ui.big.loader:after {\n width: @big;\n height: @big;\n margin: @bigOffset;\n}\n.ui.huge.loader:before,\n.ui.huge.loader:after {\n width: @huge;\n height: @huge;\n margin: @hugeOffset;\n}\n.ui.massive.loader:before,\n.ui.massive.loader:after {\n width: @massive;\n height: @massive;\n margin: @massiveOffset;\n}\n\n/*-------------------\n Coupling\n--------------------*/\n\n/* Show inside active dimmer */\n.ui.dimmer .loader {\n display: block;\n}\n\n/* Black Dimmer */\n.ui.dimmer .ui.loader {\n color: @invertedLoaderTextColor;\n}\n.ui.dimmer .ui.loader:before {\n border-color: @invertedLoaderFillColor;\n}\n.ui.dimmer .ui.loader:after {\n border-color: @invertedShapeBorderColor;\n}\n\n/* White Dimmer (Inverted) */\n.ui.inverted.dimmer .ui.loader {\n color: @loaderTextColor;\n}\n.ui.inverted.dimmer .ui.loader:before {\n border-color: @loaderFillColor;\n}\n.ui.inverted.dimmer .ui.loader:after {\n border-color: @shapeBorderColor;\n}\n\n/*******************************\n Types\n*******************************/\n\n\n/*-------------------\n Text\n--------------------*/\n\n.ui.text.loader {\n width: auto !important;\n height: auto !important;\n text-align: center;\n font-style: normal;\n}\n\n\n/*******************************\n States\n*******************************/\n\n.ui.indeterminate.loader:after {\n animation-direction: @indeterminateDirection;\n animation-duration: @indeterminateSpeed;\n}\n\n.ui.loader.active,\n.ui.loader.visible {\n display: block;\n}\n.ui.loader.disabled,\n.ui.loader.hidden {\n display: none;\n}\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Sizes\n--------------------*/\n\n\n/* Loader */\n.ui.inverted.dimmer .ui.mini.loader,\n.ui.mini.loader {\n width: @mini;\n height: @mini;\n font-size: @miniFontSize;\n}\n.ui.inverted.dimmer .ui.tiny.loader,\n.ui.tiny.loader {\n width: @tiny;\n height: @tiny;\n font-size: @tinyFontSize;\n}\n.ui.inverted.dimmer .ui.small.loader,\n.ui.small.loader {\n width: @small;\n height: @small;\n font-size: @smallFontSize;\n}\n.ui.inverted.dimmer .ui.loader,\n.ui.loader {\n width: @medium;\n height: @medium;\n font-size: @mediumFontSize;\n}\n.ui.inverted.dimmer .ui.large.loader,\n.ui.large.loader {\n width: @large;\n height: @large;\n font-size: @largeFontSize;\n}\n.ui.inverted.dimmer .ui.big.loader,\n.ui.big.loader {\n width: @big;\n height: @big;\n font-size: @bigFontSize;\n}\n.ui.inverted.dimmer .ui.huge.loader,\n.ui.huge.loader {\n width: @huge;\n height: @huge;\n font-size: @hugeFontSize;\n}\n.ui.inverted.dimmer .ui.massive.loader,\n.ui.massive.loader {\n width: @massive;\n height: @massive;\n font-size: @massiveFontSize;\n}\n\n/* Text Loader */\n.ui.mini.text.loader {\n min-width: @mini;\n padding-top: (@mini + @textDistance);\n}\n.ui.tiny.text.loader {\n min-width: @tiny;\n padding-top: (@tiny + @textDistance);\n}\n.ui.small.text.loader {\n min-width: @small;\n padding-top: (@small + @textDistance);\n}\n.ui.text.loader {\n min-width: @medium;\n padding-top: (@medium + @textDistance);\n}\n.ui.large.text.loader {\n min-width: @large;\n padding-top: (@large + @textDistance);\n}\n.ui.big.text.loader {\n min-width: @big;\n padding-top: (@big + @textDistance);\n}\n.ui.huge.text.loader {\n min-width: @huge;\n padding-top: (@huge + @textDistance);\n}\n.ui.massive.text.loader {\n min-width: @massive;\n padding-top: (@massive + @textDistance);\n}\n\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.loader {\n color: @invertedLoaderTextColor\n}\n.ui.inverted.loader:before {\n border-color: @invertedLoaderFillColor;\n}\n.ui.inverted.loader:after {\n border-top-color: @invertedLoaderLineColor;\n}\n\n/*-------------------\n Inline\n--------------------*/\n\n.ui.inline.loader {\n position: relative;\n vertical-align: @inlineVerticalAlign;\n margin: @inlineMargin;\n left: 0em;\n top: 0em;\n transform: none;\n}\n\n.ui.inline.loader.active,\n.ui.inline.loader.visible {\n display: inline-block;\n}\n\n/* Centered Inline */\n.ui.centered.inline.loader.active,\n.ui.centered.inline.loader.visible {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/rail.less", "content": "/*!\n * # Semantic UI - Rail\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'rail';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Rails\n*******************************/\n\n.ui.rail {\n position: absolute;\n top: 0%;\n width: @width;\n height: @height;\n}\n\n.ui.left.rail {\n left: auto;\n right: 100%;\n padding: 0em @splitDistance 0em 0em;\n margin: 0em @splitDistance 0em 0em;\n}\n\n.ui.right.rail {\n left: 100%;\n right: auto;\n padding: 0em 0em 0em @splitDistance;\n margin: 0em 0em 0em @splitDistance;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Internal\n---------------*/\n\n.ui.left.internal.rail {\n left: 0%;\n right: auto;\n padding: 0em 0em 0em @splitDistance;\n margin: 0em 0em 0em @splitDistance;\n}\n\n.ui.right.internal.rail {\n left: auto;\n right: 0%;\n padding: 0em @splitDistance 0em 0em;\n margin: 0em @splitDistance 0em 0em;\n}\n\n\n/*--------------\n Dividing\n---------------*/\n\n.ui.dividing.rail {\n width: @dividingWidth;\n}\n.ui.left.dividing.rail {\n padding: 0em @splitDividingDistance 0em 0em;\n margin: 0em @splitDividingDistance 0em 0em;\n border-right: @dividingBorder;\n}\n.ui.right.dividing.rail {\n border-left: @dividingBorder;\n padding: 0em 0em 0em @splitDividingDistance;\n margin: 0em 0em 0em @splitDividingDistance;\n}\n\n/*--------------\n Distance\n---------------*/\n\n.ui.close.rail {\n width: @closeWidth;\n}\n.ui.close.left.rail {\n padding: 0em @splitCloseDistance 0em 0em;\n margin: 0em @splitCloseDistance 0em 0em;\n}\n.ui.close.right.rail {\n padding: 0em 0em 0em @splitCloseDistance;\n margin: 0em 0em 0em @splitCloseDistance;\n}\n\n.ui.very.close.rail {\n width: @veryCloseWidth;\n}\n.ui.very.close.left.rail {\n padding: 0em @splitVeryCloseDistance 0em 0em;\n margin: 0em @splitVeryCloseDistance 0em 0em;\n}\n.ui.very.close.right.rail {\n padding: 0em 0em 0em @splitVeryCloseDistance;\n margin: 0em 0em 0em @splitVeryCloseDistance;\n}\n\n/*--------------\n Attached\n---------------*/\n\n.ui.attached.left.rail,\n.ui.attached.right.rail {\n padding: 0em;\n margin: 0em;\n}\n\n/*--------------\n Sizing\n---------------*/\n\n.ui.mini.rail {\n font-size: @mini;\n}\n.ui.tiny.rail {\n font-size: @tiny;\n}\n.ui.small.rail {\n font-size: @small;\n}\n.ui.rail {\n font-size: @medium;\n}\n.ui.large.rail {\n font-size: @large;\n}\n.ui.big.rail {\n font-size: @big;\n}\n.ui.huge.rail {\n font-size: @huge;\n}\n.ui.massive.rail {\n font-size: @massive;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/reveal.less", "content": "/*!\n * # Semantic UI - Reveal\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'reveal';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Reveal\n*******************************/\n\n.ui.reveal {\n display: inherit;\n position: relative !important;\n font-size: 0em !important;\n}\n\n.ui.reveal > .visible.content {\n position: absolute !important;\n top: 0em !important;\n left: 0em !important;\n z-index: @topZIndex !important;\n transition: @transition;\n}\n.ui.reveal > .hidden.content {\n position: relative !important;\n z-index: @bottomZIndex !important;\n}\n\n/* Make sure hovered element is on top of other reveal */\n.ui.active.reveal .visible.content,\n.ui.reveal:hover .visible.content {\n z-index: @activeZIndex !important;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n\n/*--------------\n Slide\n---------------*/\n\n.ui.slide.reveal {\n position: relative !important;\n overflow: hidden !important;\n white-space: nowrap;\n}\n\n.ui.slide.reveal > .content {\n display: block;\n width: 100%;\n white-space: normal;\n float: left;\n\n margin: 0em;\n transition: @slideTransition;\n}\n\n.ui.slide.reveal > .visible.content {\n position: relative !important;\n}\n.ui.slide.reveal > .hidden.content {\n position: absolute !important;\n left: 0% !important;\n width: 100% !important;\n transform: translateX(100%) !important;\n}\n.ui.slide.active.reveal > .visible.content,\n.ui.slide.reveal:hover > .visible.content {\n transform: translateX(-100%) !important;\n}\n.ui.slide.active.reveal > .hidden.content,\n.ui.slide.reveal:hover > .hidden.content {\n transform: translateX(0%) !important;\n}\n\n.ui.slide.right.reveal > .visible.content {\n transform: translateX(0%) !important;\n}\n.ui.slide.right.reveal > .hidden.content {\n transform: translateX(-100%) !important;\n}\n.ui.slide.right.active.reveal > .visible.content,\n.ui.slide.right.reveal:hover > .visible.content {\n transform: translateX(100%) !important;\n}\n.ui.slide.right.active.reveal > .hidden.content,\n.ui.slide.right.reveal:hover > .hidden.content {\n transform: translateX(0%) !important;\n}\n\n.ui.slide.up.reveal > .hidden.content {\n transform: translateY(100%) !important;\n}\n.ui.slide.up.active.reveal > .visible.content,\n.ui.slide.up.reveal:hover > .visible.content {\n transform: translateY(-100%) !important;\n}\n.ui.slide.up.active.reveal > .hidden.content,\n.ui.slide.up.reveal:hover > .hidden.content {\n transform: translateY(0%) !important;\n}\n\n.ui.slide.down.reveal > .hidden.content {\n transform: translateY(-100%) !important;\n}\n.ui.slide.down.active.reveal > .visible.content,\n.ui.slide.down.reveal:hover > .visible.content {\n transform: translateY(100%) !important;\n}\n.ui.slide.down.active.reveal > .hidden.content,\n.ui.slide.down.reveal:hover > .hidden.content {\n transform: translateY(0%) !important;\n}\n\n\n/*--------------\n Fade\n---------------*/\n\n.ui.fade.reveal > .visible.content {\n opacity: 1;\n}\n.ui.fade.active.reveal > .visible.content,\n.ui.fade.reveal:hover > .visible.content {\n opacity: 0;\n}\n\n\n/*--------------\n Move\n---------------*/\n\n.ui.move.reveal {\n position: relative !important;\n overflow: hidden !important;\n white-space: nowrap;\n}\n\n.ui.move.reveal > .content {\n display: block;\n float: left;\n white-space: normal;\n\n margin: 0em;\n transition: @moveTransition;\n}\n\n.ui.move.reveal > .visible.content {\n position: relative !important;\n}\n.ui.move.reveal > .hidden.content {\n position: absolute !important;\n left: 0% !important;\n width: 100% !important;\n}\n.ui.move.active.reveal > .visible.content,\n.ui.move.reveal:hover > .visible.content {\n transform: translateX(-100%) !important;\n}\n.ui.move.right.active.reveal > .visible.content,\n.ui.move.right.reveal:hover > .visible.content {\n transform: translateX(100%) !important;\n}\n.ui.move.up.active.reveal > .visible.content,\n.ui.move.up.reveal:hover > .visible.content {\n transform: translateY(-100%) !important;\n}\n.ui.move.down.active.reveal > .visible.content,\n.ui.move.down.reveal:hover > .visible.content {\n transform: translateY(100%) !important;\n}\n\n\n\n/*--------------\n Rotate\n---------------*/\n\n.ui.rotate.reveal > .visible.content {\n transition-duration: @transitionDuration;\n transform: rotate(0deg);\n}\n\n.ui.rotate.reveal > .visible.content,\n.ui.rotate.right.reveal > .visible.content {\n transform-origin: bottom right;\n}\n.ui.rotate.active.reveal > .visible.content,\n.ui.rotate.reveal:hover > .visible.content,\n.ui.rotate.right.active.reveal > .visible.content,\n.ui.rotate.right.reveal:hover > .visible.content {\n transform: rotate(@rotateDegrees);\n}\n\n.ui.rotate.left.reveal > .visible.content {\n transform-origin: bottom left;\n}\n.ui.rotate.left.active.reveal > .visible.content,\n.ui.rotate.left.reveal:hover > .visible.content {\n transform: rotate(-@rotateDegrees);\n}\n\n/*******************************\n States\n*******************************/\n\n.ui.disabled.reveal:hover > .visible.visible.content {\n position: static !important;\n display: block !important;\n opacity: 1 !important;\n top: 0 !important;\n left: 0 !important;\n right: auto !important;\n bottom: auto !important;\n transform: none !important;\n}\n.ui.disabled.reveal:hover > .hidden.hidden.content {\n display: none !important;\n}\n\n\n/*******************************\n Coupling\n*******************************/\n\n.ui.reveal > .ui.ribbon.label {\n z-index: @overlayZIndex;\n}\n\n/*******************************\n Variations\n*******************************/\n\n/*--------------\n Visible\n---------------*/\n\n.ui.visible.reveal {\n overflow: visible;\n}\n\n/*--------------\n Instant\n---------------*/\n\n.ui.instant.reveal > .content {\n transition-delay: 0s !important;\n}\n\n\n/*--------------\n Sizing\n---------------*/\n\n.ui.reveal > .content {\n font-size: @medium !important;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/segment.less", "content": "/*!\n * # Semantic UI - Segment\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'element';\n@element : 'segment';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Segment\n*******************************/\n\n.ui.segment {\n position: relative;\n background: @background;\n box-shadow: @boxShadow;\n margin: @margin;\n padding: @padding;\n border-radius: @borderRadius;\n border: @border;\n}\n\n.ui.segment:first-child {\n margin-top: 0em;\n}\n.ui.segment:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Vertical */\n.ui.vertical.segment {\n margin: 0em;\n padding-left: 0em;\n padding-right: 0em;\n\n background: none transparent;\n border-radius: 0px;\n box-shadow: none;\n border: none;\n border-bottom: @borderWidth solid @borderColor;\n}\n.ui.vertical.segment:last-child {\n border-bottom: none;\n}\n\n\n/*-------------------\n Loose Coupling\n--------------------*/\n\n/* Header */\n.ui.inverted.segment > .ui.header {\n color: @white;\n}\n\n/* Label */\n.ui[class*=\"bottom attached\"].segment > [class*=\"top attached\"].label {\n border-top-left-radius: 0em;\n border-top-right-radius: 0em;\n}\n.ui[class*=\"top attached\"].segment > [class*=\"bottom attached\"].label {\n border-bottom-left-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n.ui.attached.segment:not(.top):not(.bottom) > [class*=\"top attached\"].label {\n border-top-left-radius: 0em;\n border-top-right-radius: 0em;\n}\n.ui.attached.segment:not(.top):not(.bottom) > [class*=\"bottom attached\"].label {\n border-bottom-left-radius: 0em;\n border-bottom-right-radius: 0em;\n}\n\n/* Grid */\n.ui.page.grid.segment,\n.ui.grid > .row > .ui.segment.column,\n.ui.grid > .ui.segment.column {\n padding-top: @pageGridMargin;\n padding-bottom: @pageGridMargin;\n}\n.ui.grid.segment {\n margin: @margin;\n border-radius: @borderRadius;\n}\n\n/* Table */\n.ui.basic.table.segment {\n background: @background;\n border: @border;\n box-shadow: @boxShadow;\n}\n.ui[class*=\"very basic\"].table.segment {\n padding: @padding;\n}\n\n\n/*******************************\n Types\n*******************************/\n\n/*-------------------\n Piled\n--------------------*/\n\n.ui.piled.segments,\n.ui.piled.segment {\n margin: @piledMargin 0em;\n box-shadow: @piledBoxShadow;\n z-index: @piledZIndex;\n}\n.ui.piled.segment:first-child {\n margin-top: 0em;\n}\n.ui.piled.segment:last-child {\n margin-bottom: 0em;\n}\n.ui.piled.segments:after,\n.ui.piled.segments:before,\n.ui.piled.segment:after,\n.ui.piled.segment:before {\n background-color: @white;\n visibility: visible;\n content: '';\n display: block;\n height: 100%;\n left: 0px;\n position: absolute;\n width: 100%;\n border: @piledBorder;\n box-shadow: @piledBoxShadow;\n}\n.ui.piled.segments:before,\n.ui.piled.segment:before {\n transform: rotate(-@piledDegrees);\n top: 0;\n z-index: -2;\n}\n.ui.piled.segments:after,\n.ui.piled.segment:after {\n transform: rotate(@piledDegrees);\n top: 0;\n z-index: -1;\n}\n\n/* Piled Attached */\n.ui[class*=\"top attached\"].piled.segment {\n margin-top: @piledMargin;\n margin-bottom: 0em;\n}\n.ui.piled.segment[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n.ui.piled.segment[class*=\"bottom attached\"] {\n margin-top: 0em;\n margin-bottom: @piledMargin;\n}\n.ui.piled.segment[class*=\"bottom attached\"]:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Stacked\n--------------------*/\n\n.ui.stacked.segment {\n padding-bottom: @stackedPadding;\n}\n.ui.stacked.segments:before,\n.ui.stacked.segments:after,\n.ui.stacked.segment:before,\n.ui.stacked.segment:after {\n content: '';\n position: absolute;\n bottom: -(@stackedHeight / 2);\n left: 0%;\n\n border-top: 1px solid @borderColor;\n background: @stackedPageBackground;\n\n width: 100%;\n height: @stackedHeight;\n visibility: visible;\n}\n.ui.stacked.segments:before,\n.ui.stacked.segment:before {\n display: none;\n}\n\n/* Add additional page */\n.ui.tall.stacked.segments:before,\n.ui.tall.stacked.segment:before {\n display: block;\n bottom: 0px;\n}\n\n/* Inverted */\n.ui.stacked.inverted.segments:before,\n.ui.stacked.inverted.segments:after,\n.ui.stacked.inverted.segment:before,\n.ui.stacked.inverted.segment:after {\n background-color: @subtleTransparentBlack;\n border-top: 1px solid @selectedBorderColor;\n}\n\n/*-------------------\n Padded\n--------------------*/\n\n.ui.padded.segment {\n padding: @paddedSegmentPadding;\n}\n\n.ui[class*=\"very padded\"].segment {\n padding: @veryPaddedSegmentPadding;\n}\n\n/* Padded vertical */\n.ui.padded.segment.vertical.segment,\n.ui[class*=\"very padded\"].vertical.segment {\n padding-left: 0px;\n padding-right: 0px;\n}\n\n/*-------------------\n Compact\n--------------------*/\n\n.ui.compact.segment {\n display: table;\n}\n\n/* Compact Group */\n.ui.compact.segments {\n display: inline-flex;\n}\n.ui.compact.segments .segment,\n.ui.segments .compact.segment {\n display: block;\n flex: 0 1 auto;\n}\n\n/*-------------------\n Circular\n--------------------*/\n\n.ui.circular.segment {\n display: table-cell;\n padding: @circularPadding;\n text-align: center;\n vertical-align: middle;\n border-radius: 500em;\n}\n\n/*-------------------\n Raised\n--------------------*/\n\n.ui.raised.segments,\n.ui.raised.segment {\n box-shadow: @raisedBoxShadow;\n}\n\n\n/*******************************\n Groups\n*******************************/\n\n/* Group */\n.ui.segments {\n flex-direction: column;\n position: relative;\n margin: @groupedMargin;\n border: @groupedBorder;\n box-shadow: @groupedBoxShadow;\n border-radius: @groupedBorderRadius;\n}\n.ui.segments:first-child {\n margin-top: 0em;\n}\n.ui.segments:last-child {\n margin-bottom: 0em;\n}\n\n\n/* Nested Segment */\n.ui.segments > .segment {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: @groupedSegmentMargin;\n width: @groupedSegmentWidth;\n box-shadow: @groupedSegmentBoxShadow;\n border: @groupedSegmentBorder;\n border-top: @groupedSegmentDivider;\n}\n\n.ui.segments:not(.horizontal) > .segment:first-child {\n top: @attachedTopOffset;\n bottom: 0px;\n border-top: none;\n margin-top: 0em;\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n\n/* Bottom */\n.ui.segments:not(.horizontal) > .segment:last-child {\n top: @attachedBottomOffset;\n bottom: 0px;\n margin-top: 0em;\n margin-bottom: 0em;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n\n/* Only */\n.ui.segments:not(.horizontal) > .segment:only-child {\n border-radius: @borderRadius;\n}\n\n\n/* Nested Group */\n.ui.segments > .ui.segments {\n border-top: @groupedSegmentDivider;\n margin: @nestedGroupMargin;\n}\n.ui.segments > .segments:first-child {\n border-top: none;\n}\n.ui.segments > .segment + .segments:not(.horizontal) {\n margin-top: 0em;\n}\n\n/* Horizontal Group */\n.ui.horizontal.segments {\n display: flex;\n flex-direction: row;\n background-color: transparent;\n border-radius: 0px;\n padding: 0em;\n background-color: @background;\n box-shadow: @boxShadow;\n margin: @margin;\n border-radius: @borderRadius;\n border: @border;\n}\n\n/* Nested Horizontal Group */\n.ui.segments > .horizontal.segments {\n margin: 0em;\n background-color: transparent;\n border-radius: 0px;\n border: none;\n box-shadow: none;\n border-top: @groupedSegmentDivider;\n}\n\n/* Horizontal Segment */\n.ui.horizontal.segments > .segment {\n flex: 1 1 auto;\n -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */\n margin: 0em;\n min-width: 0px;\n background-color: transparent;\n border-radius: 0px;\n border: none;\n box-shadow: none;\n border-left: @borderWidth solid @borderColor;\n}\n\n/* Border Fixes */\n.ui.segments > .horizontal.segments:first-child {\n border-top: none;\n}\n.ui.horizontal.segments > .segment:first-child {\n border-left: none;\n}\n\n\n/*******************************\n States\n*******************************/\n\n/*--------------\n Disabled\n---------------*/\n\n.ui.disabled.segment {\n opacity: @disabledOpacity;\n color: @disabledTextColor;\n}\n\n/*--------------\n Loading\n---------------*/\n\n.ui.loading.segment {\n position: relative;\n cursor: default;\n pointer-events: none;\n text-shadow: none !important;\n color: transparent !important;\n transition: all 0s linear;\n}\n.ui.loading.segment:before {\n position: absolute;\n content: '';\n top: 0%;\n left: 0%;\n background: @loaderDimmerColor;\n width: 100%;\n height: 100%;\n border-radius: @borderRadius;\n z-index: @loaderDimmerZIndex;\n}\n.ui.loading.segment:after {\n position: absolute;\n content: '';\n top: 50%;\n left: 50%;\n\n margin: @loaderMargin;\n width: @loaderSize;\n height: @loaderSize;\n\n animation: segment-spin @loaderSpeed linear;\n animation-iteration-count: infinite;\n\n border-radius: @circularRadius;\n\n border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;\n border-style: solid;\n border-width: @loaderLineWidth;\n\n box-shadow: 0px 0px 0px 1px transparent;\n visibility: visible;\n z-index: @loaderLineZIndex;\n}\n\n@keyframes segment-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*-------------------\n Basic\n--------------------*/\n\n.ui.basic.segment {\n background: @basicBackground;\n box-shadow: @basicBoxShadow;\n border: @basicBorder;\n border-radius: @basicBorderRadius;\n}\n\n/*-------------------\n Clearing\n--------------------*/\n\n.ui.clearing.segment:after {\n content: \".\";\n display: block;\n height: 0;\n clear: both;\n visibility: hidden;\n}\n\n/*-------------------\n Colors\n--------------------*/\n\n/* Red */\n.ui.red.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @red !important;\n}\n.ui.inverted.red.segment {\n background-color: @red !important;\n color: @white !important;\n}\n\n/* Orange */\n.ui.orange.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @orange !important;\n}\n.ui.inverted.orange.segment {\n background-color: @orange !important;\n color: @white !important;\n}\n\n/* Yellow */\n.ui.yellow.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @yellow !important;\n}\n.ui.inverted.yellow.segment {\n background-color: @yellow !important;\n color: @white !important;\n}\n\n/* Olive */\n.ui.olive.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @olive !important;\n}\n.ui.inverted.olive.segment {\n background-color: @olive !important;\n color: @white !important;\n}\n\n/* Green */\n.ui.green.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @green !important;\n}\n.ui.inverted.green.segment {\n background-color: @green !important;\n color: @white !important;\n}\n\n/* Teal */\n.ui.teal.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @teal !important;\n}\n.ui.inverted.teal.segment {\n background-color: @teal !important;\n color: @white !important;\n}\n\n/* Blue */\n.ui.blue.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @blue !important;\n}\n.ui.inverted.blue.segment {\n background-color: @blue !important;\n color: @white !important;\n}\n\n/* Violet */\n.ui.violet.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @violet !important;\n}\n.ui.inverted.violet.segment {\n background-color: @violet !important;\n color: @white !important;\n}\n\n/* Purple */\n.ui.purple.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @purple !important;\n}\n.ui.inverted.purple.segment {\n background-color: @purple !important;\n color: @white !important;\n}\n\n/* Pink */\n.ui.pink.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @pink !important;\n}\n.ui.inverted.pink.segment {\n background-color: @pink !important;\n color: @white !important;\n}\n\n/* Brown */\n.ui.brown.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @brown !important;\n}\n.ui.inverted.brown.segment {\n background-color: @brown !important;\n color: @white !important;\n}\n\n/* Grey */\n.ui.grey.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @grey !important;\n}\n.ui.inverted.grey.segment {\n background-color: @grey !important;\n color: @white !important;\n}\n\n/* Black */\n.ui.black.segment:not(.inverted) {\n border-top: @coloredBorderSize solid @black !important;\n}\n.ui.inverted.black.segment {\n background-color: @black !important;\n color: @white !important;\n}\n\n/*-------------------\n Aligned\n--------------------*/\n\n.ui[class*=\"left aligned\"].segment {\n text-align: left;\n}\n.ui[class*=\"right aligned\"].segment {\n text-align: right;\n}\n.ui[class*=\"center aligned\"].segment {\n text-align: center;\n}\n\n/*-------------------\n Floated\n--------------------*/\n\n.ui.floated.segment,\n.ui[class*=\"left floated\"].segment {\n float: left;\n margin-right: @floatedDistance;\n}\n.ui[class*=\"right floated\"].segment {\n float: right;\n margin-left: @floatedDistance;\n}\n\n\n/*-------------------\n Inverted\n--------------------*/\n\n.ui.inverted.segment {\n border: none;\n box-shadow: none;\n}\n.ui.inverted.segment,\n.ui.primary.inverted.segment {\n background: @invertedBackground;\n color: @invertedTextColor;\n}\n\n/* Nested */\n.ui.inverted.segment .segment {\n color: @textColor;\n}\n.ui.inverted.segment .inverted.segment {\n color: @invertedTextColor;\n}\n\n/* Attached */\n.ui.inverted.attached.segment {\n border-color: @solidWhiteBorderColor;\n}\n\n/*-------------------\n Emphasis\n--------------------*/\n\n/* Secondary */\n.ui.secondary.segment {\n background: @secondaryBackground;\n color: @secondaryColor;\n}\n.ui.secondary.inverted.segment {\n background: @secondaryInvertedBackground;\n color: @secondaryInvertedColor;\n}\n\n/* Tertiary */\n.ui.tertiary.segment {\n background: @tertiaryBackground;\n color: @tertiaryColor;\n}\n.ui.tertiary.inverted.segment {\n background: @tertiaryInvertedBackground;\n color: @tertiaryInvertedColor;\n}\n\n\n/*-------------------\n Attached\n--------------------*/\n\n/* Middle */\n.ui.attached.segment {\n top: 0px;\n bottom: 0px;\n border-radius: 0px;\n margin: 0em @attachedHorizontalOffset;\n width: @attachedWidth;\n max-width: @attachedWidth;\n box-shadow: @attachedBoxShadow;\n border: @attachedBorder;\n}\n.ui.attached:not(.message) + .ui.attached.segment:not(.top) {\n border-top: none;\n}\n\n/* Top */\n.ui[class*=\"top attached\"].segment {\n bottom: 0px;\n margin-bottom: 0em;\n top: @attachedTopOffset;\n margin-top: @verticalMargin;\n border-radius: @borderRadius @borderRadius 0em 0em;\n}\n.ui.segment[class*=\"top attached\"]:first-child {\n margin-top: 0em;\n}\n\n/* Bottom */\n.ui.segment[class*=\"bottom attached\"] {\n bottom: 0px;\n margin-top: 0em;\n top: @attachedBottomOffset;\n margin-bottom: @verticalMargin;\n box-shadow: @attachedBottomBoxShadow;\n border-radius: 0em 0em @borderRadius @borderRadius;\n}\n.ui.segment[class*=\"bottom attached\"]:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Size\n--------------------*/\n\n.ui.mini.segments .segment,\n.ui.mini.segment {\n font-size: @mini;\n}\n.ui.tiny.segments .segment,\n.ui.tiny.segment {\n font-size: @tiny;\n}\n.ui.small.segments .segment,\n.ui.small.segment {\n font-size: @small;\n}\n.ui.segments .segment,\n.ui.segment {\n font-size: @medium;\n}\n.ui.large.segments .segment,\n.ui.large.segment {\n font-size: @large;\n}\n.ui.big.segments .segment,\n.ui.big.segment {\n font-size: @big;\n}\n.ui.huge.segments .segment,\n.ui.huge.segment {\n font-size: @huge;\n}\n.ui.massive.segments .segment,\n.ui.massive.segment {\n font-size: @massive;\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/elements/step.less", "content": "/*!\n * # Semantic UI - Step\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Step\n*******************************/\n\n/*--------------\n Load Theme\n---------------*/\n\n@type : 'element';\n@element : 'step';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Plural\n*******************************/\n\n.ui.steps {\n display: inline-flex;\n flex-direction: row;\n align-items: stretch;\n margin: @stepMargin;\n background: @stepsBackground;\n box-shadow: @stepsBoxShadow;\n line-height: @lineHeight;\n border-radius: @stepsBorderRadius;\n border: @stepsBorder;\n}\n\n/* First Steps */\n.ui.steps:first-child {\n margin-top: 0em;\n}\n\n/* Last Steps */\n.ui.steps:last-child {\n margin-bottom: 0em;\n}\n\n\n/*******************************\n Singular\n*******************************/\n\n.ui.steps .step {\n position: relative;\n display: flex;\n flex: 1 0 auto;\n flex-wrap: wrap;\n flex-direction: row;\n vertical-align: middle;\n align-items: center;\n justify-content: @justifyContent;\n\n margin: @verticalMargin @horizontalMargin;\n padding: @verticalPadding @horizontalPadding;\n background: @background;\n color: @textColor;\n box-shadow: @boxShadow;\n border-radius: @borderRadius;\n border: @border;\n border-right: @divider;\n transition: @transition;\n}\n\n/* Arrow */\n.ui.steps .step:after {\n display: none;\n position: absolute;\n z-index: 2;\n content: '';\n top: @arrowTopOffset;\n right: @arrowRightOffset;\n border: medium none;\n background-color: @arrowBackgroundColor;\n width: @arrowSize;\n height: @arrowSize;\n\n border-style: solid;\n border-color: @borderColor;\n border-width: @arrowBorderWidth;\n\n transition: @transition;\n transform: translateY(-50%) translateX(50%) rotate(-45deg);\n}\n\n/* First Step */\n.ui.steps .step:first-child {\n padding-left: @horizontalPadding;\n border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;\n}\n\n/* Last Step */\n.ui.steps .step:last-child {\n border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;\n}\n.ui.steps .step:last-child {\n border-right: none;\n margin-right: 0em;\n}\n\n/* Only Step */\n.ui.steps .step:only-child {\n border-radius: @stepsBorderRadius;\n}\n\n\n/*******************************\n Content\n*******************************/\n\n/* Title */\n.ui.steps .step .title {\n font-family: @titleFontFamily;\n font-size: @titleFontSize;\n font-weight: @titleFontWeight;\n}\n.ui.steps .step > .title {\n width: 100%;\n}\n\n/* Description */\n.ui.steps .step .description {\n font-weight: @descriptionFontWeight;\n font-size: @descriptionFontSize;\n color: @descriptionColor;\n}\n.ui.steps .step > .description {\n width: 100%;\n}\n.ui.steps .step .title ~ .description {\n margin-top: @descriptionDistance;\n}\n\n/* Icon */\n.ui.steps .step > .icon {\n line-height: 1;\n font-size: @iconSize;\n margin: 0em @iconDistance 0em 0em;\n}\n.ui.steps .step > .icon,\n.ui.steps .step > .icon ~ .content {\n display: block;\n flex: 0 1 auto;\n align-self: @iconAlign;\n}\n.ui.steps .step > .icon ~ .content {\n flex-grow: 1 0 auto;\n}\n\n/* Horizontal Icon */\n.ui.steps:not(.vertical) .step > .icon {\n width: auto;\n}\n\n/* Link */\n.ui.steps .link.step,\n.ui.steps a.step {\n cursor: pointer;\n}\n\n/*******************************\n Types\n*******************************/\n\n/*--------------\n Ordered\n---------------*/\n\n.ui.ordered.steps {\n counter-reset: ordered;\n}\n.ui.ordered.steps .step:before {\n display: block;\n position: static;\n text-align: center;\n content: counters(ordered, \".\");\n align-self: @iconAlign;\n margin-right: @iconDistance;\n font-size: @iconSize;\n counter-increment: ordered;\n font-family: @orderedFontFamily;\n font-weight: @orderedFontWeight;\n}\n\n.ui.ordered.steps .step > * {\n display: block;\n align-self: @iconAlign;\n}\n\n\n/*--------------\n Vertical\n---------------*/\n\n.ui.vertical.steps {\n display: inline-flex;\n flex-direction: column;\n overflow: visible;\n}\n.ui.vertical.steps .step {\n justify-content: flex-start;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n border-right: none;\n border-bottom: @verticalDivider;\n}\n.ui.vertical.steps .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui.vertical.steps .step:last-child {\n border-bottom: none;\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n.ui.vertical.steps .step:only-child {\n border-radius: @stepsBorderRadius;\n}\n\n\n/* Arrow */\n.ui.vertical.steps .step:after {\n display: none;\n}\n.ui.vertical.steps .step:after {\n top: @verticalArrowTopOffset;\n right: @verticalArrowRightOffset;\n border-width: @verticalArrowBorderWidth;\n}\n\n.ui.vertical.steps .step:after {\n display: @verticalArrowDisplay;\n}\n.ui.vertical.steps .active.step:after {\n display: @verticalActiveArrowDisplay;\n}\n.ui.vertical.steps .step:last-child:after {\n display: @verticalLastArrowDisplay;\n}\n.ui.vertical.steps .active.step:last-child:after {\n display: @verticalActiveLastArrowDisplay;\n}\n\n\n/*---------------\n Responsive\n----------------*/\n\n/* Mobile (Default) */\n@media only screen and (max-width: (@largestMobileScreen)) {\n\n .ui.steps:not(.unstackable) {\n display: inline-flex;\n overflow: visible;\n flex-direction: column;\n }\n .ui.steps:not(.unstackable) .step {\n width: 100% !important;\n flex-direction: column;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n }\n .ui.steps:not(.unstackable) .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n }\n .ui.steps:not(.unstackable) .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n }\n\n /* Arrow */\n .ui.steps:not(.unstackable) .step:after {\n display: none !important;\n }\n\n /* Content */\n .ui.steps:not(.unstackable) .step .content {\n text-align: center;\n }\n\n /* Icon */\n .ui.steps:not(.unstackable) .step > .icon,\n .ui.ordered.steps:not(.unstackable) .step:before {\n margin: 0em 0em @mobileIconDistance 0em;\n }\n\n}\n\n/*******************************\n States\n*******************************/\n\n/* Link Hover */\n.ui.steps .link.step:hover::after,\n.ui.steps .link.step:hover,\n.ui.steps a.step:hover::after,\n.ui.steps a.step:hover {\n background: @hoverBackground;\n color: @hoverColor;\n}\n\n/* Link Down */\n.ui.steps .link.step:active::after,\n.ui.steps .link.step:active,\n.ui.steps a.step:active::after,\n.ui.steps a.step:active {\n background: @downBackground;\n color: @downColor;\n}\n\n/* Active */\n.ui.steps .step.active {\n cursor: auto;\n background: @activeBackground;\n}\n.ui.steps .step.active:after {\n background: @activeBackground;\n}\n.ui.steps .step.active .title {\n color: @activeColor;\n}\n.ui.ordered.steps .step.active:before,\n.ui.steps .active.step .icon {\n color: @activeIconColor;\n}\n\n/* Active Arrow */\n.ui.steps .step:after {\n display: @arrowDisplay;\n}\n.ui.steps .active.step:after {\n display: @activeArrowDisplay;\n}\n.ui.steps .step:last-child:after {\n display: @lastArrowDisplay;\n}\n.ui.steps .active.step:last-child:after {\n display: @activeLastArrowDisplay;\n}\n\n/* Active Hover */\n.ui.steps .link.active.step:hover::after,\n.ui.steps .link.active.step:hover,\n.ui.steps a.active.step:hover::after,\n.ui.steps a.active.step:hover {\n cursor: pointer;\n background: @activeHoverBackground;\n color: @activeHoverColor;\n}\n\n/* Completed */\n.ui.steps .step.completed > .icon:before,\n.ui.ordered.steps .step.completed:before {\n color: @completedColor;\n}\n\n/* Disabled */\n.ui.steps .disabled.step {\n cursor: auto;\n background: @disabledBackground;\n pointer-events: none;\n}\n.ui.steps .disabled.step,\n.ui.steps .disabled.step .title,\n.ui.steps .disabled.step .description {\n color: @disabledColor;\n}\n.ui.steps .disabled.step:after {\n background: @disabledBackground;\n}\n\n\n/*******************************\n Variations\n*******************************/\n\n\n/*--------------\n Stackable\n---------------*/\n\n/* Tablet Or Below */\n@media only screen and (max-width: @largestTabletScreen) {\n\n.ui[class*=\"tablet stackable\"].steps {\n display: inline-flex;\n overflow: visible;\n flex-direction: column;\n}\n\n/* Steps */\n.ui[class*=\"tablet stackable\"].steps .step {\n flex-direction: column;\n border-radius: @borderRadius;\n padding: @verticalPadding @horizontalPadding;\n}\n.ui[class*=\"tablet stackable\"].steps .step:first-child {\n padding: @verticalPadding @horizontalPadding;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui[class*=\"tablet stackable\"].steps .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n\n/* Arrow */\n.ui[class*=\"tablet stackable\"].steps .step:after {\n display: none !important;\n}\n\n/* Content */\n.ui[class*=\"tablet stackable\"].steps .step .content {\n text-align: center;\n}\n\n/* Icon */\n.ui[class*=\"tablet stackable\"].steps .step > .icon,\n.ui[class*=\"tablet stackable\"].ordered.steps .step:before {\n margin: 0em 0em @mobileIconDistance 0em;\n}\n\n}\n\n/*--------------\n Fluid\n---------------*/\n\n/* Fluid */\n.ui.fluid.steps {\n display: flex;\n width: 100%;\n}\n\n/*--------------\n Attached\n---------------*/\n\n/* Top */\n.ui.attached.steps {\n width: @attachedWidth !important;\n margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;\n max-width: @attachedWidth;\n border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;\n}\n.ui.attached.steps .step:first-child {\n border-radius: @stepsBorderRadius 0em 0em 0em;\n}\n.ui.attached.steps .step:last-child {\n border-radius: 0em @stepsBorderRadius 0em 0em;\n}\n\n/* Bottom */\n.ui.bottom.attached.steps {\n margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;\n border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;\n}\n.ui.bottom.attached.steps .step:first-child {\n border-radius: 0em 0em 0em @stepsBorderRadius;\n}\n.ui.bottom.attached.steps .step:last-child {\n border-radius: 0em 0em @stepsBorderRadius 0em;\n}\n\n/*-------------------\n Evenly Divided\n--------------------*/\n\n.ui.one.steps,\n.ui.two.steps,\n.ui.three.steps,\n.ui.four.steps,\n.ui.five.steps,\n.ui.six.steps,\n.ui.seven.steps,\n.ui.eight.steps {\n width: 100%;\n}\n.ui.one.steps > .step,\n.ui.two.steps > .step,\n.ui.three.steps > .step,\n.ui.four.steps > .step,\n.ui.five.steps > .step,\n.ui.six.steps > .step,\n.ui.seven.steps > .step,\n.ui.eight.steps > .step {\n flex-wrap: nowrap;\n}\n.ui.one.steps > .step {\n width: 100%;\n}\n.ui.two.steps > .step {\n width: 50%;\n}\n.ui.three.steps > .step {\n width: 33.333%;\n}\n.ui.four.steps > .step {\n width: 25%;\n}\n.ui.five.steps > .step {\n width: 20%;\n}\n.ui.six.steps > .step {\n width: 16.666%;\n}\n.ui.seven.steps > .step {\n width: 14.285%;\n}\n.ui.eight.steps > .step {\n width: 12.500%;\n}\n\n/*-------------------\n Sizes\n--------------------*/\n\n\n.ui.mini.steps .step,\n.ui.mini.step {\n font-size: @mini;\n}\n.ui.tiny.steps .step,\n.ui.tiny.step {\n font-size: @tiny;\n}\n.ui.small.steps .step,\n.ui.small.step {\n font-size: @small;\n}\n.ui.steps .step,\n.ui.step {\n font-size: @medium;\n}\n.ui.large.steps .step,\n.ui.large.step {\n font-size: @large;\n}\n.ui.big.steps .step,\n.ui.big.step {\n font-size: @big;\n}\n.ui.huge.steps .step,\n.ui.huge.step {\n font-size: @huge;\n}\n.ui.massive.steps .step,\n.ui.massive.step {\n font-size: @massive;\n}\n\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/globals/reset.less", "content": "/*!\n * # Semantic UI - Reset\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'global';\n@element : 'reset';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Reset\n*******************************/\n\n/* Border-Box */\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\nhtml {\n box-sizing: border-box;\n}\n\n/* iPad Input Shadows */\ninput[type=\"text\"], input[type=\"email\"], input[type=\"search\"], input[type=\"password\"] {\n -webkit-appearance: none;\n -moz-appearance: none; /* mobile firefox too! */\n}\n\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/globals/site.js", "content": "/*!\n * # Semantic UI - Site\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n$.site = $.fn.site = function(parameters) {\n var\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.site.settings, parameters)\n : $.extend({}, $.site.settings),\n\n namespace = settings.namespace,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $document = $(document),\n $module = $document,\n element = this,\n instance = $module.data(moduleNamespace),\n\n module,\n returnedValue\n ;\n module = {\n\n initialize: function() {\n module.instantiate();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of site', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n normalize: function() {\n module.fix.console();\n module.fix.requestAnimationFrame();\n },\n\n fix: {\n console: function() {\n module.debug('Normalizing window.console');\n if (console === undefined || console.log === undefined) {\n module.verbose('Console not available, normalizing events');\n module.disable.console();\n }\n if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') {\n module.verbose('Console group not available, normalizing events');\n window.console.group = function() {};\n window.console.groupEnd = function() {};\n window.console.groupCollapsed = function() {};\n }\n if (typeof console.markTimeline == 'undefined') {\n module.verbose('Mark timeline not available, normalizing events');\n window.console.markTimeline = function() {};\n }\n },\n consoleClear: function() {\n module.debug('Disabling programmatic console clearing');\n window.console.clear = function() {};\n },\n requestAnimationFrame: function() {\n module.debug('Normalizing requestAnimationFrame');\n if(window.requestAnimationFrame === undefined) {\n module.debug('RequestAnimationFrame not available, normalizing event');\n window.requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); }\n ;\n }\n }\n },\n\n moduleExists: function(name) {\n return ($.fn[name] !== undefined && $.fn[name].settings !== undefined);\n },\n\n enabled: {\n modules: function(modules) {\n var\n enabledModules = []\n ;\n modules = modules || settings.modules;\n $.each(modules, function(index, name) {\n if(module.moduleExists(name)) {\n enabledModules.push(name);\n }\n });\n return enabledModules;\n }\n },\n\n disabled: {\n modules: function(modules) {\n var\n disabledModules = []\n ;\n modules = modules || settings.modules;\n $.each(modules, function(index, name) {\n if(!module.moduleExists(name)) {\n disabledModules.push(name);\n }\n });\n return disabledModules;\n }\n },\n\n change: {\n setting: function(setting, value, modules, modifyExisting) {\n modules = (typeof modules === 'string')\n ? (modules === 'all')\n ? settings.modules\n : [modules]\n : modules || settings.modules\n ;\n modifyExisting = (modifyExisting !== undefined)\n ? modifyExisting\n : true\n ;\n $.each(modules, function(index, name) {\n var\n namespace = (module.moduleExists(name))\n ? $.fn[name].settings.namespace || false\n : true,\n $existingModules\n ;\n if(module.moduleExists(name)) {\n module.verbose('Changing default setting', setting, value, name);\n $.fn[name].settings[setting] = value;\n if(modifyExisting && namespace) {\n $existingModules = $(':data(module-' + namespace + ')');\n if($existingModules.length > 0) {\n module.verbose('Modifying existing settings', $existingModules);\n $existingModules[name]('setting', setting, value);\n }\n }\n }\n });\n },\n settings: function(newSettings, modules, modifyExisting) {\n modules = (typeof modules === 'string')\n ? [modules]\n : modules || settings.modules\n ;\n modifyExisting = (modifyExisting !== undefined)\n ? modifyExisting\n : true\n ;\n $.each(modules, function(index, name) {\n var\n $existingModules\n ;\n if(module.moduleExists(name)) {\n module.verbose('Changing default setting', newSettings, name);\n $.extend(true, $.fn[name].settings, newSettings);\n if(modifyExisting && namespace) {\n $existingModules = $(':data(module-' + namespace + ')');\n if($existingModules.length > 0) {\n module.verbose('Modifying existing settings', $existingModules);\n $existingModules[name]('setting', newSettings);\n }\n }\n }\n });\n }\n },\n\n enable: {\n console: function() {\n module.console(true);\n },\n debug: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Enabling debug for modules', modules);\n module.change.setting('debug', true, modules, modifyExisting);\n },\n verbose: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Enabling verbose debug for modules', modules);\n module.change.setting('verbose', true, modules, modifyExisting);\n }\n },\n disable: {\n console: function() {\n module.console(false);\n },\n debug: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Disabling debug for modules', modules);\n module.change.setting('debug', false, modules, modifyExisting);\n },\n verbose: function(modules, modifyExisting) {\n modules = modules || settings.modules;\n module.debug('Disabling verbose debug for modules', modules);\n module.change.setting('verbose', false, modules, modifyExisting);\n }\n },\n\n console: function(enable) {\n if(enable) {\n if(instance.cache.console === undefined) {\n module.error(error.console);\n return;\n }\n module.debug('Restoring console function');\n window.console = instance.cache.console;\n }\n else {\n module.debug('Disabling console function');\n instance.cache.console = window.console;\n window.console = {\n clear : function(){},\n error : function(){},\n group : function(){},\n groupCollapsed : function(){},\n groupEnd : function(){},\n info : function(){},\n log : function(){},\n markTimeline : function(){},\n warn : function(){}\n };\n }\n },\n\n destroy: function() {\n module.verbose('Destroying previous site for', $module);\n $module\n .removeData(moduleNamespace)\n ;\n },\n\n cache: {},\n\n setting: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n settings[name] = value;\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else if(value !== undefined) {\n module[name] = value;\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Element' : element,\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n module.destroy();\n }\n module.initialize();\n }\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.site.settings = {\n\n name : 'Site',\n namespace : 'site',\n\n error : {\n console : 'Console cannot be restored, most likely it was overwritten outside of module',\n method : 'The method you called is not defined.'\n },\n\n debug : false,\n verbose : false,\n performance : true,\n\n modules: [\n 'accordion',\n 'api',\n 'checkbox',\n 'dimmer',\n 'dropdown',\n 'embed',\n 'form',\n 'modal',\n 'nag',\n 'popup',\n 'rating',\n 'shape',\n 'sidebar',\n 'state',\n 'sticky',\n 'tab',\n 'transition',\n 'visit',\n 'visibility'\n ],\n\n siteNamespace : 'site',\n namespaceStub : {\n cache : {},\n config : {},\n sections : {},\n section : {},\n utilities : {}\n }\n\n};\n\n// allows for selection of elements with data attributes\n$.extend($.expr[ \":\" ], {\n data: ($.expr.createPseudo)\n ? $.expr.createPseudo(function(dataName) {\n return function(elem) {\n return !!$.data(elem, dataName);\n };\n })\n : function(elem, i, match) {\n // support: jQuery < 1.8\n return !!$.data(elem, match[ 3 ]);\n }\n});\n\n\n})( jQuery, window, document );\n" }, { "path": "semantic/src/definitions/globals/site.less", "content": "/*!\n * # Semantic UI - Site\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n\n/*******************************\n Theme\n*******************************/\n\n@type : 'global';\n@element : 'site';\n\n@import (multiple) '../../theme.config';\n\n/*******************************\n Page\n*******************************/\n\n.loadFonts();\n\nhtml,\nbody {\n height: 100%;\n}\n\nhtml {\n font-size: @emSize;\n}\n\nbody {\n margin: 0px;\n padding: 0px;\n overflow-x: @pageOverflowX;\n min-width: @pageMinWidth;\n background: @pageBackground;\n font-family: @pageFont;\n font-size: @fontSize;\n line-height: @lineHeight;\n color: @textColor;\n font-smoothing: @fontSmoothing;\n}\n\n/*******************************\n Headers\n*******************************/\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n font-family: @headerFont;\n line-height: @headerLineHeight;\n margin: @headerMargin;\n font-weight: @headerFontWeight;\n padding: 0em;\n}\n\nh1 {\n min-height: 1rem;\n font-size: @h1;\n}\nh2 {\n font-size: @h2;\n}\nh3 {\n font-size: @h3;\n}\nh4 {\n font-size: @h4;\n}\nh5 {\n font-size: @h5;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child,\nh4:first-child,\nh5:first-child {\n margin-top: 0em;\n}\n\nh1:last-child,\nh2:last-child,\nh3:last-child,\nh4:last-child,\nh5:last-child {\n margin-bottom: 0em;\n}\n\n\n/*******************************\n Text\n*******************************/\n\np {\n margin: @paragraphMargin;\n line-height: @paragraphLineHeight;\n}\np:first-child {\n margin-top: 0em;\n}\np:last-child {\n margin-bottom: 0em;\n}\n\n/*-------------------\n Links\n--------------------*/\n\na {\n color: @linkColor;\n text-decoration: @linkUnderline;\n}\na:hover {\n color: @linkHoverColor;\n text-decoration: @linkHoverUnderline;\n}\n\n\n/*******************************\n Scrollbars\n*******************************/\n\n.addScrollbars() when (@useCustomScrollbars) {\n\n /* Force Simple Scrollbars */\n body ::-webkit-scrollbar {\n -webkit-appearance: none;\n width: @customScrollbarWidth;\n height: @customScrollbarHeight;\n }\n body ::-webkit-scrollbar-track {\n background: @trackBackground;\n border-radius: @trackBorderRadius;\n }\n body ::-webkit-scrollbar-thumb {\n cursor: pointer;\n border-radius: @thumbBorderRadius;\n background: @thumbBackground;\n transition: @thumbTransition;\n }\n body ::-webkit-scrollbar-thumb:window-inactive {\n background: @thumbInactiveBackground;\n }\n body ::-webkit-scrollbar-thumb:hover {\n background: @thumbHoverBackground;\n }\n\n /* Inverted UI */\n body .ui.inverted::-webkit-scrollbar-track {\n background: @trackInvertedBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb {\n background: @thumbInvertedBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {\n background: @thumbInvertedInactiveBackground;\n }\n body .ui.inverted::-webkit-scrollbar-thumb:hover {\n background: @thumbInvertedHoverBackground;\n }\n}\n\n/*******************************\n Highlighting\n*******************************/\n\n/* Site */\n::-webkit-selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n::-moz-selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n::selection {\n background-color: @highlightBackground;\n color: @highlightColor;\n}\n\n/* Form */\ntextarea::-webkit-selection,\ninput::-webkit-selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\ntextarea::-moz-selection,\ninput::-moz-selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\ntextarea::selection,\ninput::selection {\n background-color: @inputHighlightBackground;\n color: @inputHighlightColor;\n}\n\n.addScrollbars();\n.loadUIOverrides();\n" }, { "path": "semantic/src/definitions/modules/accordion.js", "content": "/*!\n * # Semantic UI - Accordion\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.accordion = function(parameters) {\n var\n $allModules = $(this),\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n\n requestAnimationFrame = window.requestAnimationFrame\n || window.mozRequestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.msRequestAnimationFrame\n || function(callback) { setTimeout(callback, 0); },\n\n returnedValue\n ;\n $allModules\n .each(function() {\n var\n settings = ( $.isPlainObject(parameters) )\n ? $.extend(true, {}, $.fn.accordion.settings, parameters)\n : $.extend({}, $.fn.accordion.settings),\n\n className = settings.className,\n namespace = settings.namespace,\n selector = settings.selector,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n moduleSelector = $allModules.selector || '',\n\n $module = $(this),\n $title = $module.find(selector.title),\n $content = $module.find(selector.content),\n\n element = this,\n instance = $module.data(moduleNamespace),\n observer,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.debug('Initializing', $module);\n module.bind.events();\n if(settings.observeChanges) {\n module.observeChanges();\n }\n module.instantiate();\n },\n\n instantiate: function() {\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.debug('Destroying previous instance', $module);\n $module\n .off(eventNamespace)\n .removeData(moduleNamespace)\n ;\n },\n\n refresh: function() {\n $title = $module.find(selector.title);\n $content = $module.find(selector.content);\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n observer = new MutationObserver(function(mutations) {\n module.debug('DOM tree modified, updating selector cache');\n module.refresh();\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n bind: {\n events: function() {\n module.debug('Binding delegated events');\n $module\n .on(settings.on + eventNamespace, selector.trigger, module.event.click)\n ;\n }\n },\n\n event: {\n click: function() {\n module.toggle.call(this);\n }\n },\n\n toggle: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpen = (isActive && !isAnimating),\n isOpening = (!isActive && isAnimating)\n ;\n module.debug('Toggling visibility of content', $activeTitle);\n if(isOpen || isOpening) {\n if(settings.collapsible) {\n module.close.call($activeTitle);\n }\n else {\n module.debug('Cannot close accordion content collapsing is disabled');\n }\n }\n else {\n module.open.call($activeTitle);\n }\n },\n\n open: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpen = (isActive || isAnimating)\n ;\n if(isOpen) {\n module.debug('Accordion already open, skipping', $activeContent);\n return;\n }\n module.debug('Opening accordion content', $activeTitle);\n settings.onOpening.call($activeContent);\n settings.onChanging.call($activeContent);\n if(settings.exclusive) {\n module.closeOthers.call($activeTitle);\n }\n $activeTitle\n .addClass(className.active)\n ;\n $activeContent\n .stop(true, true)\n .addClass(className.animating)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $activeContent\n .children()\n .transition({\n animation : 'fade in',\n queue : false,\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $activeContent\n .children()\n .stop(true, true)\n .animate({\n opacity: 1\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $activeContent\n .slideDown(settings.duration, settings.easing, function() {\n $activeContent\n .removeClass(className.animating)\n .addClass(className.active)\n ;\n module.reset.display.call(this);\n settings.onOpen.call(this);\n settings.onChange.call(this);\n })\n ;\n },\n\n close: function(query) {\n var\n $activeTitle = (query !== undefined)\n ? (typeof query === 'number')\n ? $title.eq(query)\n : $(query).closest(selector.title)\n : $(this).closest(selector.title),\n $activeContent = $activeTitle.next($content),\n isAnimating = $activeContent.hasClass(className.animating),\n isActive = $activeContent.hasClass(className.active),\n isOpening = (!isActive && isAnimating),\n isClosing = (isActive && isAnimating)\n ;\n if((isActive || isOpening) && !isClosing) {\n module.debug('Closing accordion content', $activeContent);\n settings.onClosing.call($activeContent);\n settings.onChanging.call($activeContent);\n $activeTitle\n .removeClass(className.active)\n ;\n $activeContent\n .stop(true, true)\n .addClass(className.animating)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $activeContent\n .children()\n .transition({\n animation : 'fade out',\n queue : false,\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $activeContent\n .children()\n .stop(true, true)\n .animate({\n opacity: 0\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $activeContent\n .slideUp(settings.duration, settings.easing, function() {\n $activeContent\n .removeClass(className.animating)\n .removeClass(className.active)\n ;\n module.reset.display.call(this);\n settings.onClose.call(this);\n settings.onChange.call(this);\n })\n ;\n }\n },\n\n closeOthers: function(index) {\n var\n $activeTitle = (index !== undefined)\n ? $title.eq(index)\n : $(this).closest(selector.title),\n $parentTitles = $activeTitle.parents(selector.content).prev(selector.title),\n $activeAccordion = $activeTitle.closest(selector.accordion),\n activeSelector = selector.title + '.' + className.active + ':visible',\n activeContent = selector.content + '.' + className.active + ':visible',\n $openTitles,\n $nestedTitles,\n $openContents\n ;\n if(settings.closeNested) {\n $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);\n $openContents = $openTitles.next($content);\n }\n else {\n $openTitles = $activeAccordion.find(activeSelector).not($parentTitles);\n $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);\n $openTitles = $openTitles.not($nestedTitles);\n $openContents = $openTitles.next($content);\n }\n if( ($openTitles.length > 0) ) {\n module.debug('Exclusive enabled, closing other content', $openTitles);\n $openTitles\n .removeClass(className.active)\n ;\n $openContents\n .removeClass(className.animating)\n .stop(true, true)\n ;\n if(settings.animateChildren) {\n if($.fn.transition !== undefined && $module.transition('is supported')) {\n $openContents\n .children()\n .transition({\n animation : 'fade out',\n useFailSafe : true,\n debug : settings.debug,\n verbose : settings.verbose,\n duration : settings.duration\n })\n ;\n }\n else {\n $openContents\n .children()\n .stop(true, true)\n .animate({\n opacity: 0\n }, settings.duration, module.resetOpacity)\n ;\n }\n }\n $openContents\n .slideUp(settings.duration , settings.easing, function() {\n $(this).removeClass(className.active);\n module.reset.display.call(this);\n })\n ;\n }\n },\n\n reset: {\n\n display: function() {\n module.verbose('Removing inline display from element', this);\n $(this).css('display', '');\n if( $(this).attr('style') === '') {\n $(this)\n .attr('style', '')\n .removeAttr('style')\n ;\n }\n },\n\n opacity: function() {\n module.verbose('Removing inline opacity from element', this);\n $(this).css('opacity', '');\n if( $(this).attr('style') === '') {\n $(this)\n .attr('style', '')\n .removeAttr('style')\n ;\n }\n },\n\n },\n\n setting: function(name, value) {\n module.debug('Changing setting', name, value);\n if( $.isPlainObject(name) ) {\n $.extend(true, settings, name);\n }\n else if(value !== undefined) {\n if($.isPlainObject(settings[name])) {\n $.extend(true, settings[name], value);\n }\n else {\n settings[name] = value;\n }\n }\n else {\n return settings[name];\n }\n },\n internal: function(name, value) {\n module.debug('Changing internal', name, value);\n if(value !== undefined) {\n if( $.isPlainObject(name) ) {\n $.extend(true, module, name);\n }\n else {\n module[name] = value;\n }\n }\n else {\n return module[name];\n }\n },\n debug: function() {\n if(!settings.silent && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.debug.apply(console, arguments);\n }\n }\n },\n verbose: function() {\n if(!settings.silent && settings.verbose && settings.debug) {\n if(settings.performance) {\n module.performance.log(arguments);\n }\n else {\n module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');\n module.verbose.apply(console, arguments);\n }\n }\n },\n error: function() {\n if(!settings.silent) {\n module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');\n module.error.apply(console, arguments);\n }\n },\n performance: {\n log: function(message) {\n var\n currentTime,\n executionTime,\n previousTime\n ;\n if(settings.performance) {\n currentTime = new Date().getTime();\n previousTime = time || currentTime;\n executionTime = currentTime - previousTime;\n time = currentTime;\n performance.push({\n 'Name' : message[0],\n 'Arguments' : [].slice.call(message, 1) || '',\n 'Element' : element,\n 'Execution Time' : executionTime\n });\n }\n clearTimeout(module.performance.timer);\n module.performance.timer = setTimeout(module.performance.display, 500);\n },\n display: function() {\n var\n title = settings.name + ':',\n totalTime = 0\n ;\n time = false;\n clearTimeout(module.performance.timer);\n $.each(performance, function(index, data) {\n totalTime += data['Execution Time'];\n });\n title += ' ' + totalTime + 'ms';\n if(moduleSelector) {\n title += ' \\'' + moduleSelector + '\\'';\n }\n if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {\n console.groupCollapsed(title);\n if(console.table) {\n console.table(performance);\n }\n else {\n $.each(performance, function(index, data) {\n console.log(data['Name'] + ': ' + data['Execution Time']+'ms');\n });\n }\n console.groupEnd();\n }\n performance = [];\n }\n },\n invoke: function(query, passedArguments, context) {\n var\n object = instance,\n maxDepth,\n found,\n response\n ;\n passedArguments = passedArguments || queryArguments;\n context = element || context;\n if(typeof query == 'string' && object !== undefined) {\n query = query.split(/[\\. ]/);\n maxDepth = query.length - 1;\n $.each(query, function(depth, value) {\n var camelCaseValue = (depth != maxDepth)\n ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)\n : query\n ;\n if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {\n object = object[camelCaseValue];\n }\n else if( object[camelCaseValue] !== undefined ) {\n found = object[camelCaseValue];\n return false;\n }\n else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {\n object = object[value];\n }\n else if( object[value] !== undefined ) {\n found = object[value];\n return false;\n }\n else {\n module.error(error.method, query);\n return false;\n }\n });\n }\n if ( $.isFunction( found ) ) {\n response = found.apply(context, passedArguments);\n }\n else if(found !== undefined) {\n response = found;\n }\n if($.isArray(returnedValue)) {\n returnedValue.push(response);\n }\n else if(returnedValue !== undefined) {\n returnedValue = [returnedValue, response];\n }\n else if(response !== undefined) {\n returnedValue = response;\n }\n return found;\n }\n };\n if(methodInvoked) {\n if(instance === undefined) {\n module.initialize();\n }\n module.invoke(query);\n }\n else {\n if(instance !== undefined) {\n instance.invoke('destroy');\n }\n module.initialize();\n }\n })\n ;\n return (returnedValue !== undefined)\n ? returnedValue\n : this\n ;\n};\n\n$.fn.accordion.settings = {\n\n name : 'Accordion',\n namespace : 'accordion',\n\n silent : false,\n debug : false,\n verbose : false,\n performance : true,\n\n on : 'click', // event on title that opens accordion\n\n observeChanges : true, // whether accordion should automatically refresh on DOM insertion\n\n exclusive : true, // whether a single accordion content panel should be open at once\n collapsible : true, // whether accordion content can be closed\n closeNested : false, // whether nested content should be closed when a panel is closed\n animateChildren : true, // whether children opacity should be animated\n\n duration : 350, // duration of animation\n easing : 'easeOutQuad', // easing equation for animation\n\n onOpening : function(){}, // callback before open animation\n onClosing : function(){}, // callback before closing animation\n onChanging : function(){}, // callback before closing or opening animation\n\n onOpen : function(){}, // callback after open animation\n onClose : function(){}, // callback after closing animation\n onChange : function(){}, // callback after closing or opening animation\n\n error: {\n method : 'The method you called is not defined'\n },\n\n className : {\n active : 'active',\n animating : 'animating'\n },\n\n selector : {\n accordion : '.accordion',\n title : '.title',\n trigger : '.title',\n content : '.content'\n }\n\n};\n\n// Adds easing\n$.extend( $.easing, {\n easeOutQuad: function (x, t, b, c, d) {\n return -c *(t/=d)*(t-2) + b;\n }\n});\n\n})( jQuery, window, document );\n\n" }, { "path": "semantic/src/definitions/modules/accordion.less", "content": "/*!\r\n * # Semantic UI - Accordion\r\n * http://github.com/semantic-org/semantic-ui/\r\n *\r\n *\r\n * Released under the MIT license\r\n * http://opensource.org/licenses/MIT\r\n *\r\n */\r\n\r\n/*******************************\r\n Theme\r\n*******************************/\r\n\r\n@type : 'module';\r\n@element : 'accordion';\r\n\r\n@import (multiple) '../../theme.config';\r\n\r\n/*******************************\r\n Accordion\r\n*******************************/\r\n\r\n.ui.accordion,\r\n.ui.accordion .accordion {\r\n max-width: 100%;\r\n}\r\n.ui.accordion .accordion {\r\n margin: @childAccordionMargin;\r\n padding: @childAccordionPadding;\r\n}\r\n\r\n/* Title */\r\n.ui.accordion .title,\r\n.ui.accordion .accordion .title {\r\n cursor: pointer;\r\n}\r\n\r\n/* Default Styling */\r\n.ui.accordion .title:not(.ui) {\r\n padding: @titlePadding;\r\n font-family: @titleFont;\r\n font-size: @titleFontSize;\r\n color: @titleColor;\r\n}\r\n\r\n/* Content */\r\n.ui.accordion .title ~ .content,\r\n.ui.accordion .accordion .title ~ .content {\r\n display: none;\r\n}\r\n\r\n/* Default Styling */\r\n.ui.accordion:not(.styled) .title ~ .content:not(.ui),\r\n.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {\r\n margin: @contentMargin;\r\n padding: @contentPadding;\r\n}\r\n.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {\r\n padding-bottom: 0em;\r\n}\r\n\r\n/* Arrow */\r\n.ui.accordion .title .dropdown.icon,\r\n.ui.accordion .accordion .title .dropdown.icon {\r\n display: @iconDisplay;\r\n float: @iconFloat;\r\n opacity: @iconOpacity;\r\n width: @iconWidth;\r\n height: @iconHeight;\r\n margin: @iconMargin;\r\n padding: @iconPadding;\r\n font-size: @iconFontSize;\r\n transition: @iconTransition;\r\n vertical-align: @iconVerticalAlign;\r\n transform: @iconTransform;\r\n}\r\n\r\n/*--------------\r\n Coupling\r\n---------------*/\r\n\r\n/* Menu */\r\n.ui.accordion.menu .item .title {\r\n display: block;\r\n padding: @menuTitlePadding;\r\n}\r\n.ui.accordion.menu .item .title > .dropdown.icon {\r\n float: @menuIconFloat;\r\n margin: @menuIconMargin;\r\n transform: @menuIconTransform;\r\n}\r\n\r\n/* Header */\r\n.ui.accordion .ui.header .dropdown.icon {\r\n font-size: @iconFontSize;\r\n margin: @iconMargin;\r\n}\r\n\r\n/*******************************\r\n States\r\n*******************************/\r\n\r\n.ui.accordion .active.title .dropdown.icon,\r\n.ui.accordion .accordion .active.title .dropdown.icon {\r\n transform: @activeIconTransform;\r\n}\r\n\r\n.ui.accordion.menu .item .active.title > .dropdown.icon {\r\n transform: @activeIconTransform;\r\n}\r\n\r\n/*******************************\r\n Types\r\n*******************************/\r\n\r\n/*--------------\r\n Styled\r\n---------------*/\r\n\r\n.ui.styled.accordion {\r\n width: @styledWidth;\r\n}\r\n\r\n.ui.styled.accordion,\r\n.ui.styled.accordion .accordion {\r\n border-radius: @styledBorderRadius;\r\n background: @styledBackground;\r\n box-shadow: @styledBoxShadow;\r\n}\r\n.ui.styled.accordion .title,\r\n.ui.styled.accordion .accordion .title {\r\n margin: @styledTitleMargin;\r\n padding: @styledTitlePadding;\r\n color: @styledTitleColor;\r\n font-weight: @styledTitleFontWeight;\r\n border-top: @styledTitleBorder;\r\n transition: @styledTitleTransition;\r\n}\r\n.ui.styled.accordion > .title:first-child,\r\n.ui.styled.accordion .accordion .title:first-child {\r\n border-top: none;\r\n}\r\n\r\n\r\n/* Content */\r\n.ui.styled.accordion .content,\r\n.ui.styled.accordion .accordion .content {\r\n margin: @styledContentMargin;\r\n padding: @styledContentPadding;\r\n}\r\n.ui.styled.accordion .accordion .content {\r\n padding: @styledChildContentMargin;\r\n padding: @styledChildContentPadding;\r\n}\r\n\r\n\r\n/* Hover */\r\n.ui.styled.accordion .title:hover,\r\n.ui.styled.accordion .active.title,\r\n.ui.styled.accordion .accordion .title:hover,\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledTitleHoverBackground;\r\n color: @styledTitleHoverColor;\r\n}\r\n.ui.styled.accordion .accordion .title:hover,\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledHoverChildTitleBackground;\r\n color: @styledHoverChildTitleColor;\r\n}\r\n\r\n\r\n/* Active */\r\n.ui.styled.accordion .active.title {\r\n background: @styledActiveTitleBackground;\r\n color: @styledActiveTitleColor;\r\n}\r\n.ui.styled.accordion .accordion .active.title {\r\n background: @styledActiveChildTitleBackground;\r\n color: @styledActiveChildTitleColor;\r\n}\r\n\r\n\r\n/*******************************\r\n States\r\n*******************************/\r\n\r\n/*--------------\r\n Active\r\n---------------*/\r\n\r\n.ui.accordion .active.content,\r\n.ui.accordion .accordion .active.content {\r\n display: block;\r\n}\r\n\r\n/*******************************\r\n Variations\r\n*******************************/\r\n\r\n/*--------------\r\n Fluid\r\n---------------*/\r\n\r\n.ui.fluid.accordion,\r\n.ui.fluid.accordion .accordion {\r\n width: 100%;\r\n}\r\n\r\n/*--------------\r\n Inverted\r\n---------------*/\r\n\r\n.ui.inverted.accordion .title:not(.ui) {\r\n color: @invertedTitleColor;\r\n}\r\n\r\n.loadUIOverrides();\r\n\r\n" }, { "path": "semantic/src/definitions/modules/checkbox.js", "content": "/*!\n * # Semantic UI - Checkbox\n * http://github.com/semantic-org/semantic-ui/\n *\n *\n * Released under the MIT license\n * http://opensource.org/licenses/MIT\n *\n */\n\n;(function ($, window, document, undefined) {\n\n'use strict';\n\nwindow = (typeof window != 'undefined' && window.Math == Math)\n ? window\n : (typeof self != 'undefined' && self.Math == Math)\n ? self\n : Function('return this')()\n;\n\n$.fn.checkbox = function(parameters) {\n var\n $allModules = $(this),\n moduleSelector = $allModules.selector || '',\n\n time = new Date().getTime(),\n performance = [],\n\n query = arguments[0],\n methodInvoked = (typeof query == 'string'),\n queryArguments = [].slice.call(arguments, 1),\n returnedValue\n ;\n\n $allModules\n .each(function() {\n var\n settings = $.extend(true, {}, $.fn.checkbox.settings, parameters),\n\n className = settings.className,\n namespace = settings.namespace,\n selector = settings.selector,\n error = settings.error,\n\n eventNamespace = '.' + namespace,\n moduleNamespace = 'module-' + namespace,\n\n $module = $(this),\n $label = $(this).children(selector.label),\n $input = $(this).children(selector.input),\n input = $input[0],\n\n initialLoad = false,\n shortcutPressed = false,\n instance = $module.data(moduleNamespace),\n\n observer,\n element = this,\n module\n ;\n\n module = {\n\n initialize: function() {\n module.verbose('Initializing checkbox', settings);\n\n module.create.label();\n module.bind.events();\n\n module.set.tabbable();\n module.hide.input();\n\n module.observeChanges();\n module.instantiate();\n module.setup();\n },\n\n instantiate: function() {\n module.verbose('Storing instance of module', module);\n instance = module;\n $module\n .data(moduleNamespace, module)\n ;\n },\n\n destroy: function() {\n module.verbose('Destroying module');\n module.unbind.events();\n module.show.input();\n $module.removeData(moduleNamespace);\n },\n\n fix: {\n reference: function() {\n if( $module.is(selector.input) ) {\n module.debug('Behavior called on adjusting invoked element');\n $module = $module.closest(selector.checkbox);\n module.refresh();\n }\n }\n },\n\n setup: function() {\n module.set.initialLoad();\n if( module.is.indeterminate() ) {\n module.debug('Initial value is indeterminate');\n module.indeterminate();\n }\n else if( module.is.checked() ) {\n module.debug('Initial value is checked');\n module.check();\n }\n else {\n module.debug('Initial value is unchecked');\n module.uncheck();\n }\n module.remove.initialLoad();\n },\n\n refresh: function() {\n $label = $module.children(selector.label);\n $input = $module.children(selector.input);\n input = $input[0];\n },\n\n hide: {\n input: function() {\n module.verbose('Modifying z-index to be unselectable');\n $input.addClass(className.hidden);\n }\n },\n show: {\n input: function() {\n module.verbose('Modifying z-index to be selectable');\n $input.removeClass(className.hidden);\n }\n },\n\n observeChanges: function() {\n if('MutationObserver' in window) {\n observer = new MutationObserver(function(mutations) {\n module.debug('DOM tree modified, updating selector cache');\n module.refresh();\n });\n observer.observe(element, {\n childList : true,\n subtree : true\n });\n module.debug('Setting up mutation observer', observer);\n }\n },\n\n attachEvents: function(selector, event) {\n var\n $element = $(selector)\n ;\n event = $.isFunction(module[event])\n ? module[event]\n : module.toggle\n ;\n if($element.length > 0) {\n module.debug('Attaching checkbox events to element', selector, event);\n $element\n .on('click' + eventNamespace, event)\n ;\n }\n else {\n module.error(error.notFound);\n }\n },\n\n event: {\n click: function(event) {\n var\n $target = $(event.target)\n ;\n if( $target.is(selector.input) ) {\n module.verbose('Using default check action on initialized checkbox');\n return;\n }\n if( $target.is(selector.link) ) {\n module.debug('Clicking link inside checkbox, skipping toggle');\n return;\n }\n module.toggle();\n $input.focus();\n event.preventDefault();\n },\n keydown: function(event) {\n var\n key = event.which,\n keyCode = {\n enter : 13,\n space : 32,\n escape : 27\n }\n ;\n if(key == keyCode.escape) {\n module.verbose('Escape key pressed blurring field');\n $input.blur();\n shortcutPressed = true;\n }\n else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {\n module.verbose('Enter/space key pressed, toggling checkbox');\n module.toggle();\n shortcutPressed = true;\n }\n else {\n shortcutPressed = false;\n }\n },\n keyup: function(event) {\n if(shortcutPressed) {\n event.preventDefault();\n }\n }\n },\n\n check: function() {\n if( !module.should.allowCheck() ) {\n return;\n }\n module.debug('Checking checkbox', $input);\n module.set.checked();\n if( !module.should.ignoreCallbacks() ) {\n settings.onChecked.call(input);\n settings.onChange.call(input);\n }\n },\n\n uncheck: function() {\n if( !module.should.allowUncheck() ) {\n return;\n }\n module.debug('Unchecking checkbox');\n module.set.unchecked();\n if( !module.should.ignoreCallbacks() ) {\n settings.onUnchecked.call(input);\n settings.onChange.call(input);\n }\n },\n\n indeterminate: function() {\n if( module.should.allowIndeterminate() ) {\n module.debug('Checkbox is already indeterminate');\n return;\n }\n module.debug('Making checkbox indeterminate');\n module.set.indeterminate();\n if( !module.should.ignoreCallbacks() ) {\n settings.onIndeterminate.call(input);\n settings.onChange.call(input);\n }\n },\n\n determinate: function() {\n if( module.should.allowDeterminate() ) {\n module.debug('Checkbox is already determinate');\n return;\n }\n module.debug('Making checkbox determinate');\n module.set.determinate();\n if( !module.should.ignoreCallbacks() ) {\n settings.onDeterminate.call(input);\n settings.onChange.call(input);\n }\n },\n\n enable: function() {\n if( module.is.enabled() ) {\n module.debug('Checkbox is already enabled');\n return;\n }\n module.debug('Enabling checkbox');\n module.set.enabled();\n settings.onEnable.call(input);\n // preserve legacy callbacks\n settings.onEnabled.call(input);\n },\n\n disable: function() {\n if( module.is.disabled() ) {\n module.debug('Checkbox is already disabled');\n return;\n }\n module.debug('Disabling checkbox');\n module.set.disabled();\n settings.onDisable.call(input);\n // preserve legacy callbacks\n settings.onDisabled.call(input);\n },\n\n get: {\n radios: function() {\n var\n name = module.get.name()\n ;\n return $('input[name=\"' + name + '\"]').closest(selector.checkbox);\n },\n otherRadios: function() {\n return module.get.radios().not($module);\n },\n name: function() {\n return $input.attr('name');\n }\n },\n\n is: {\n initialLoad: function() {\n return initialLoad;\n },\n radio: function() {\n return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');\n },\n indeterminate: function() {\n return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');\n },\n checked: function() {\n return $input.prop('checked') !== undefined && $input.prop('checked');\n },\n disabled: function() {\n return $input.prop('disabled') !== undefined && $input.prop('disabled');\n },\n enabled: function() {\n return !module.is.disabled();\n },\n determinate: function() {\n return !module.is.indeterminate();\n },\n unchecked: function() {\n return !module.is.checked();\n }\n },\n\n should: {\n allowCheck: function() {\n if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow check, checkbox is already checked');\n return false;\n }\n if(settings.beforeChecked.apply(input) === false) {\n module.debug('Should not allow check, beforeChecked cancelled');\n return false;\n }\n return true;\n },\n allowUncheck: function() {\n if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow uncheck, checkbox is already unchecked');\n return false;\n }\n if(settings.beforeUnchecked.apply(input) === false) {\n module.debug('Should not allow uncheck, beforeUnchecked cancelled');\n return false;\n }\n return true;\n },\n allowIndeterminate: function() {\n if(module.is.indeterminate() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow indeterminate, checkbox is already indeterminate');\n return false;\n }\n if(settings.beforeIndeterminate.apply(input) === false) {\n module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');\n return false;\n }\n return true;\n },\n allowDeterminate: function() {\n if(module.is.determinate() && !module.should.forceCallbacks() ) {\n module.debug('Should not allow determinate, checkbox is already determinate');\n return false;\n }\n if(settings.beforeDeterminate.apply(input) === false) {\n module.debug('Should not allow determinate, beforeDeterminate cancelled');\n return false;\n }\n return true;\n },\n forceCallbacks: function() {\n return (module.is.initialLoad() && settings.fireOnInit);\n },\n ignoreCallbacks: function() {\n return (initialLoad && !settings.fireOnInit);\n }\n },\n\n can: {\n change: function() {\n return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );\n },\n uncheck: function() {\n return (typeof settings.uncheckable === 'boolean')\n ? settings.uncheckable\n : !module.is.radio()\n ;\n }\n },\n\n set: {\n initialLoad: function() {\n initialLoad = true;\n },\n checked: function() {\n module.verbose('Setting class to checked');\n $module\n .removeClass(className.indeterminate)\n .addClass(className.checked)\n ;\n if( module.is.radio() ) {\n module.uncheckOthers();\n }\n if(!module.is.indeterminate() && module.is.checked()) {\n module.debug('Input is already checked, skipping input property change');\n return;\n }\n module.verbose('Setting state to checked', input);\n $input\n .prop('indeterminate', false)\n .prop('checked', true)\n ;\n module.trigger.change();\n },\n unchecked: function() {\n module.verbose('Removing checked class');\n $module\n .removeClass(className.indeterminate)\n .removeClass(className.checked)\n ;\n if(!module.is.indeterminate() && module.is.unchecked() ) {\n module.debug('Input is already unchecked');\n return;\n }\n module.debug('Setting state to unchecked');\n $input\n .prop('indeterminate', false)\n .prop('checked', false)\n ;\n module.trigger.change();\n },\n indeterminate: function() {\n module.verbose('Setting class to indeterminate');\n $module\n .addClass(className.indeterminate)\n ;\n if( module.is.indeterminate() ) {\n module.debug('Input is already indeterminate, skipping input property change');\n return;\n }\n module.debug('Setting state to indeterminate');\n $input\n .prop('indeterminate', true)\n ;\n module.trigger.change();\n },\n determinate: function() {\n module.verbose('Removing indeterminate class');\n $module\n .removeClass(className.indeterminate)\n ;\n if( module.is.determinate() ) {\n module.debug('Input is already determinate, skipping input property change');\n return;\n }\n module.debug('Setting state to determinate');\n $input\n .prop('indeterminate', false)\n ;\n },\n disabled: function() {\n module.verbose('Setting class to disabled');\n $module\n .addClass(className.disabled)\n ;\n if( module.is.disabled() ) {\n module.debug('Input is already disabled, skipping input property change');\n return;\n }\n module.debug('Setting state to disabled');\n $input\n .prop('disabled', 'disabled')\n ;\n module.trigger.change();\n },\n enabled: function() {\n module.verbose('Removing disabled class');\n $module.removeClass(className.disabled);\n if( module.is.enabled() ) {\n module.debug('Input is already enabled, skipping input property change');\n return;\n }\n module.debug('Setting state to enabled');\n $input\n .prop('disabled', false)\n ;\n module.trigger.change();\n },\n tabbable: function() {\n module.verbose('Adding tabindex to checkbox');\n if( $input.attr('tabindex') === undefined) {\n $input.attr('tabindex', 0);\n }\n }\n },\n\n remove: {\n initialLoad: function() {\n initialLoad = false;\n }\n },\n\n trigger: {\n change: function() {\n var\n events = document.createEvent('HTMLEvents'),\n inputElement = $input[0]\n ;\n if(inputElement) {\n module.verbose('Triggering native change event');\n events.initEvent('change', true, false);\n inputElement.dispatchEvent(events);\n }\n }\n },\n\n\n create: {\n label: function() {\n if($input.prevAll(selector.label).length > 0) {\n $input.prev(selector.label).detach().insertAfter($input);\n module.debug('Moving existing label', $label);\n }\n else if( !module.has.label() ) {\n $label = $('
}\n content={{mappedPeopleIcons}}/>\n )\n }\n else {\n // empty placeholder so the extra portion (with face icons) of the cards line up\n var peoplePopup = (
0 People
)\n }\n\n var rating = null\n if (this.props.favorited) {\n rating = 1\n }\n else {\n rating = 0\n }\n\n\n return (\n \n }>\n \n \n \n
{this.props.albumTitle}
\n \n {this.props.timestamp}\n\n
{this.props.photoCount} Photos {peoplePopup}\n\n
\n \n
\n \n \n \n )\n }\n}\n\n\n\nexport class AlbumAutoCardPlainPlaceholder extends Component {\n render() {\n return (\n
\n
\n
\n
\n
\n
\n )\n }\n}\n\nexport class AlbumAutoCardPlain extends Component {\n constructor(props){\n super(props)\n this.onRate = this.onRate.bind(this)\n }\n\n onRate(e,d) {\n if (d.rating === 0) {\n console.log('unfavorited',this.props.album.id)\n var rating = false\n }\n else {\n console.log('favorited',this.props.album.id)\n var rating = true\n }\n this.props.dispatch(toggleAlbumAutoFavorite(this.props.album.id,rating))\n }\n\n render() {\n var rating = null\n if (this.props.album.favorited) {\n rating = 1\n }\n else {\n rating = 0\n }\n var numPeople = this.props.album.people.length\n var albumId = this.props.album.people.id\n if (this.props.album.people.length > 0) {\n var mappedPeopleIcons = this.props.album.people.map(function(person){\n return (\n \n )\n })\n mappedPeopleIcons = (\n {mappedPeopleIcons}\n )\n }\n else {\n // empty placeholder so the extra portion (with face icons) of the cards line up\n var mappedPeopleIcons = (
)\n }\n return (\n
\n
\n }>\n \n \n
\n {this.props.album.title}
\n
\n {this.props.album.timestamp.split('T')[0]}\n
\n
\n {this.props.album.photo_count} Photos\n
\n
\n \n {this.props.album.people.length} People\n }\n content={mappedPeopleIcons}\n basic/>\n
\n
\n \n
\n
\n
\n
\n )\n }\n}\n\n\n\nexport class AlbumDateCardPlaceholder extends Component {\n constructor(props){\n super(props)\n }\n render() {\n return (\n \n \n \n \n \n
{this.props.timestamp}
\n \n
{this.props.photoCount} Photos
{this.props.people.length} People
\n\n
\n \n
\n \n \n \n )\n }\n}\n\n\n\nexport class AlbumDateCard extends Component {\n constructor(props){\n super(props)\n this.onRate = this.onRate.bind(this)\n }\n\n onRate(e,d) {\n if (d.rating === 0) {\n console.log('unfavorited',this.props.album_id)\n var rating = false\n }\n else {\n console.log('favorited',this.props.album_id)\n var rating = true\n }\n }\n\n render() {\n var album_id = this.props.album_id\n if (this.props.people.length > 0) {\n var mappedPeopleIcons = this.props.people.map(function(person){\n return (\n\n \n\n )\n })\n var peoplePopup = (\n {this.props.people.length} People }\n content={{mappedPeopleIcons}}/>\n )\n }\n else {\n // empty placeholder so the extra portion (with face icons) of the cards line up\n var peoplePopup = (
0 People
)\n }\n\n var rating = null\n if (this.props.favorited) {\n rating = 1\n }\n else {\n rating = 0\n }\n\n\n return (\n \n }\n >\n \n \n \n
{this.props.timestamp}
\n \n
{this.props.photoCount} Photos {peoplePopup}\n\n
\n \n
\n \n \n \n )\n }\n}\n\n\n\n\n\n\n\n\nexport class AlbumDateCardPlainPlaceholder extends Component {\n render() {\n return (\n
\n
\n
\n
\n\n
\n

\n \n
\n

\n
\n \n
\n\n
\n
\n )\n }\n}\n\nexport class AlbumDateCardPlain extends Component {\n constructor(props){\n super(props)\n this.onRate = this.onRate.bind(this)\n }\n\n onRate(e,d) {\n if (d.rating === 0) {\n console.log('unfavorited',this.props.album.id)\n var rating = false\n }\n else {\n console.log('favorited',this.props.album.id)\n var rating = true\n }\n }\n\n render() {\n var rating = null\n if (this.props.album.favorited) {\n rating = 1\n }\n else {\n rating = 0\n }\n var numPeople = this.props.album.people.length\n return (\n
\n\n
\n\n }>\n \n \n
\n\n\n
\n\n
\n {this.props.album.date}
\n
\n {this.props.album.photo_count} Photos\n
\n
\n
\n\n\n
\n )\n }\n}\n\n\n\n\n\n\n\n\n\n\nAlbumAutoCard = connect((store)=>{\n return {}\n})(AlbumAutoCard)\n\nAlbumAutoCardPlain = connect((store)=>{\n return {}\n})(AlbumAutoCardPlain)\n\n\nAlbumDateCard = connect((store)=>{\n return {}\n})(AlbumDateCard)\n\nAlbumDateCardPlain = connect((store)=>{\n return {}\n})(AlbumDateCardPlain)\n\nAlbumPeopleGallery = connect((store)=>{\n return {\n albumsPeople: store.albums.albumsPeople,\n fetchingAlbumsPeople: store.albums.fetchingAlbumsPeople,\n fetchedAlbumsPeople: store.albums.fetchedAlbumsPeople,\n }\n})(AlbumPeopleGallery)\n\nAlbumAutoGallery = connect((store)=>{\n return {\n albumsAuto: store.albums.albumsAuto,\n fetchingAlbumsAuto: store.albums.fetchingAlbumsAuto,\n fetchedAlbumsAuto: store.albums.fetchedAlbumsAuto,\n }\n})(AlbumAutoGallery)\n" }, { "path": "src/components/authenticatedImage.js", "content": "import React, {Component} from 'react';\n\nimport { Card, Image as BasicImage, Header, Divider, Item, Loader, Dimmer, Breadcrumb,\n\n Container, Label, Popup, Segment, Button, Icon} from 'semantic-ui-react';\n\nimport { connect } from \"react-redux\";\n\n\nexport class Image extends Component {\n\trender() {\n\t\tconst {auth,src, ...rest} = this.props\n\t\tconst newSource = {\n\t\t\turi:src,\n\t\t\theaders:{\n\t\t\t\tAuthorization: \"Bearer \" + auth.access.token\n\t\t\t}\n\t\t}\n\t\treturn (\n\t\t\t \n\n\t\t\t\t\n\t\t)\n\t}\n}\n\nImage = connect((store)=>{\n return {\n \tauth: store.auth\n }\n})(Image)\n" }, { "path": "src/components/charts/countryPiChart.js", "content": "import React, {Component} from 'react'\nimport {Segment, Header, Loader} from 'semantic-ui-react'\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport {fetchPhotoCountryCounts} from '../../actions/utilActions'\n\nimport Month from 'calendar-months';\nimport {Chart, Bars, Lines, Ticks, Layer, Pies, Transform} from 'rumble-charts'\nimport {Sunburst, LabelSeries} from 'react-vis';\n\n\n\n\n\nexport class CountryPiChart extends Component {\n constructor(props) {\n super(props)\n }\n componentDidMount() {\n if (!this.props.fetchedPhotoCountryCounts)\n {\n this.props.dispatch(fetchPhotoCountryCounts())\n }\n }\n render(){\n if (this.props.fetchedPhotoCountryCounts) {\n var countDict = this.props.photoCountryCounts\n var counts = Object.keys(countDict).map(function(key){\n return countDict[key]\n })\n if (counts.length === 0){counts = [1]}\n console.log(counts)\n var series = [{data:counts}]\n var map = (\n
\n
Photo Counts by Location
\n \n \n \n \n \n
\n )\n }\n else {\n var h = 200\n var w = `${this.props.containerWidth-50}px`\n var map = (\n
\n
Photo Counts by Location
\n
\n \n
\n
\n )\n }\n return (\n \n {map}\n \n )\n }\n}\n\n\n\n\n\nCountryPiChart = connect((store)=>{\n return {\n photoCountryCounts: store.util.photoCountryCounts,\n fetchingPhotoCountryCounts: store.util.fetchingPhotoCountryCounts,\n fetchedPhotoCountryCounts: store.util.fetchedPhotoCountryCounts,\n }\n})(CountryPiChart)\n\n\nexport default Dimensions()(CountryPiChart)" }, { "path": "src/components/charts/wordCloud.js", "content": "import React, {Component} from 'react'\nimport {Segment, Header,Loader} from 'semantic-ui-react'\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport {fetchWordCloud} from '../../actions/utilActions'\n\nimport Month from 'calendar-months';\nimport {Chart, Bars, Lines, Ticks, Layer, Pies, Transform, Cloud} from 'rumble-charts'\n\n\nexport class WordCloud extends Component {\n constructor(props) {\n super(props)\n }\n\n componentDidMount() {\n if (!this.props.fetchedWordCloud) {\n this.props.dispatch(fetchWordCloud())\n }\n }\n\n\n\n render(){\n if (this.props.type==='captions'){\n var title = 'Things'\n }\n else if (this.props.type==='location'){\n var title = 'Locations'\n }\n else {\n var title = 'People'\n }\n\n\n\n if (this.props.fetchedWordCloud) {\n var wordCloud = this.props.wordCloud\n if (this.props.type==='captions'){\n var series = [{data:wordCloud.captions}]\n }\n else if (this.props.type==='location'){\n var series = [{data:wordCloud.locations}] \n }\n else {\n var series = [{data:wordCloud.people}] \n }\n var chart = (\n
\n
{title}
\n \n \n \n \n \n
\n )\n }\n else {\n var h = this.props.height-70\n var w = this.props.containerWidth+60\n var chart = (\n
\n
{title}{\" \"}
\n
\n \n
\n
\n )\n }\n return (\n
\n {chart}\n
\n )\n }\n}\n\nWordCloud = connect((store)=>{\n return {\n wordCloud: store.util.wordCloud,\n fetchingWordCloud: store.util.fetchingWordCloud,\n fetchedWordCloud: store.util.fetchedWordCloud,\n }\n})(WordCloud)\n\n\nexport default Dimensions()(WordCloud)\n" }, { "path": "src/components/chartyPhotosScrollbar.js", "content": "import React, {Component} from 'react'\nimport {Segment, Header, Container} from 'semantic-ui-react'\nimport {XYPlot, XAxis, YAxis, HorizontalGridLines, LineMarkSeries, LineSeries,\n VerticalBarSeries,HorizontalBarSeries, makeHeightFlexible, makeVisFlexible,\n MarkSeries, VerticalGridLines, Crosshair, DiscreteColorLegend} from 'react-vis';\n\nimport {Chart, Transform, Bars} from 'rumble-charts'\n\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport { Graph } from 'react-d3-graph';\nimport {fetchDateAlbumsList, fetchAutoAlbumsList} from '../actions/albumsActions'\n\nimport Month from 'calendar-months';\n\n\n/*\n{\n x: el.value.x,\n y: el.value.y,\n size: el.value.size,\n name: el.person_name,\n}\n*/\n\nconst FlexibleScroll = makeHeightFlexible(XYPlot)\n\nexport class ChartyPhotosScrollbar extends Component {\n constructor(props) {\n super(props)\n this.preprocessData = this.preprocessData.bind(this)\n }\n\n componentWillMount() {\n/*\n this.props.dispatch(fetchDateAlbumsList())\n*/\n }\n\n preprocessData() {\n var firstEvent = this.props.albumsDateList[this.props.albumsDateList.length-1]\n var lastEvent = this.props.albumsDateList[0]\n var firstYear = firstEvent.date.split('-')[0]\n var firstMonth = firstEvent.date.split('-')[1]\n var lastYear = lastEvent.date.split('-')[0]\n var lastMonth = lastEvent.date.split('-')[1]\n\n var beginning = new Month(firstMonth, firstYear)\n var end = new Month(lastMonth, lastYear)\n\n\n var currentMonth = beginning.lastMonth()\n\n var dataPhotoCounts = []\n var xAxisLabels = []\n var xTickValues = []\n\n var idx = 0\n while (!currentMonth.lastMonth().isThisMonth()) {\n currentMonth = currentMonth.nextMonth()\n var y = currentMonth.year.toString()\n var m = currentMonth.month.toString()\n\n if (m.length==1){\n m = '0'+m\n }\n\n //photo counts\n var thisMonthDateAlbums = this.props.albumsDateList.filter(function(album){\n var albumYear = album.date.split('-')[0]\n var albumMonth = album.date.split('-')[1]\n if (albumYear==y && albumMonth==m){\n return true}\n else {\n return false}\n })\n\n var thisMonthPhotoCounts = thisMonthDateAlbums.map(function(album){\n return album.photo_count\n })\n\n var thisMonthTotalPhotoCount = 0\n for (var i in thisMonthPhotoCounts) {\n thisMonthTotalPhotoCount += thisMonthPhotoCounts[i]\n }\n\n\n\n var datumPhotoCounts = {\n y: idx,\n x: thisMonthTotalPhotoCount,\n month: y+m\n }\n\n\n\n\n if (m=='01') {\n var xAxisLabel = y+'-'+m\n xTickValues.push(idx)\n }\n else {\n var xAxisLabel = m\n if (m=='03'||m=='06'||m=='09'){\n xTickValues.push(idx)\n }\n }\n\n\n xAxisLabels.push(xAxisLabel)\n dataPhotoCounts.push(datumPhotoCounts)\n idx += 1\n }\n\n return (\n {\n markerSeriesPhotoCount:dataPhotoCounts,\n xAxisLabels:xAxisLabels,\n xTickValues: xTickValues\n }\n )\n }\n\n render() {\n if (this.props.fetchedAlbumsDateList){\n try { \n var preprocessed = this.preprocessData()\n }\n catch (err) {\n var preprocessed = {\n markerSeriesPhotoCount:[],\n xAxisLabels:[],\n xTickValues:[]\n }\n }\n }\n else {\n var preprocessed = {\n markerSeriesPhotoCount:[],\n xAxisLabels:[],\n xTickValues:[]\n }\n }\n var reversed = preprocessed.markerSeriesPhotoCount.reverse()\n\n console.log(series)\n console.log(reversed)\n\n var data = reversed.map(function(datum){\n return datum.x\n })\n\n var series = [{data:[0,1,2,3,4]}]\n\n return (\n \n \n e.target.style.fillOpacity = 1,\n onMouseLeave: e => e.target.style.fillOpacity = 0.8,\n onClick: (e,d) => console.log(e,d)\n }}/>\n\n \n \n )\n\n }\n}\n\n\n\nChartyPhotosScrollbar = connect((store)=>{\n return {\n albumsDateList: store.albums.albumsDateList,\n fetchingAlbumsDateList: store.albums.fetchingAlbumsDateList,\n fetchedAlbumsDateList: store.albums.fetchedAlbumsDateList,\n }\n})(ChartyPhotosScrollbar)\n\nexport default Dimensions()(ChartyPhotosScrollbar)" }, { "path": "src/components/egoGraph.js", "content": "import React, {Component} from 'react'\nimport {Segment, Header, Loader} from 'semantic-ui-react'\nimport {XYPlot, XAxis, YAxis, HorizontalGridLines, \n\t\t\t\tMarkSeries, VerticalGridLines, Crosshair} from 'react-vis';\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport { Graph } from 'react-d3-graph';\nimport { fetchSocialGraph, fetchEgoGraph } from '../actions/peopleActions'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\n\n\n\nexport class EgoGraph extends Component {\n\tcomponentWillMount() {\n\t\tif (!this.props.egoGraph.hasOwnProperty(this.props.person_id)){\n\t\t\tthis.props.dispatch(fetchEgoGraph(this.props.person_id))\n\t\t}\n\t}\n\n\trender(){\n\n\t\tvar data = this.props.socialGraph\n\t\tvar myConfig = {\n\t\t\tautomaticRearrangeAfterDropNode: false,\n\t\t\tstaticGraph:false,\n\t\t highlightBehavior: true,\n\t\t maxZoom: 4,\n\t\t minZoom: 0.1,\n\t\t node: {\n\t\t \tfontSize: 17,\n\t\t \tsize: 600,\n\t\t color: 'lightblue',\n\t\t highlightFontSize: 17,\n\t\t highlightStrokeColor: 'orange'\n\t\t },\n\t\t link: {\n\t\t highlightColor: 'orange',\n\t\t color: '#12939A',\n\t\t },\n\t\t height: this.props.height,\n\t\t width: this.props.width\n\t\t}\n\n\t\tif (this.props.egoGraph.hasOwnProperty(this.props.person_id)) {\n\t\t\tvar graph = \n\t\t}\n\t\telse {\n\t\t\tvar graph = \n\t\t}\n\n\t\treturn (\n\t
\n \t\t\t{graph}\n\t\t\t
\n\t\t)\n\t}\n}\n\n\n\n\nEgoGraph = connect((store)=>{\n return {\n egoGraph: store.people.egoGraph,\n fetching: store.people.fetchingEgoGraph,\n fetched: store.people.fetchedEgoGraph,\n }\n})(EgoGraph)\n\nexport default Dimensions()(EgoGraph)" }, { "path": "src/components/eventCountMonthGraph.js", "content": "import React, {Component} from 'react'\nimport {Loader, Grid, Segment, Header} from 'semantic-ui-react'\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport {fetchDateAlbumsList, fetchAutoAlbumsList} from '../actions/albumsActions'\nimport {fetchPhotoMonthCounts} from '../actions/utilActions'\n\nimport Month from 'calendar-months';\nimport {Chart, Bars, Lines, Ticks, Layer} from 'rumble-charts'\n\n\n/*\n{\n x: el.value.x,\n y: el.value.y,\n size: el.value.size,\n name: el.person_name,\n}\n*/\n\nexport class EventCountMonthGraph extends Component {\n constructor(props) {\n super(props)\n }\n\n componentWillMount() {\n if (!this.props.fetchedPhotoMonthCounts){\n this.props.dispatch(fetchPhotoMonthCounts())\n }\n }\n\n\n render() {\n if (this.props.fetchedPhotoMonthCounts) {\n var countDict = this.props.photoMonthCounts\n var series = countDict.map(function(el){\n return {y:el.count,month:el.month}\n })\n var xticks = countDict.map(function(el){\n return el.month\n })\n console.log(xticks)\n }\n else {\n return (\n
\n
Monthly Photo Counts
\n \n \n \n
\n )\n }\n\n var data = [{\n data: series\n }, {\n data: [0,1,2]\n }]\n\n return (\n
\n
Monthly Photo Counts
\n
\n \n \n label}/>\n xticks[label]}\n labelStyle={{textAnchor:'middle',dominantBaseline:'text-before-edge',fill:'black'}}\n labelAttributes={{y: 5}}/>\n \n \n \n
\n
\n )\n }\n}\n\n\n\nEventCountMonthGraph = connect((store)=>{\n return {\n photoMonthCounts: store.util.photoMonthCounts,\n fetchingPhotoMonthCounts: store.util.fetchingPhotoMonthCounts,\n fetchedPhotoMonthCounts: store.util.fetchedPhotoMonthCounts,\n }\n})(EventCountMonthGraph)\n\n\nexport default Dimensions()(EventCountMonthGraph)\n" }, { "path": "src/components/faceClusterGraph.js", "content": "import React, { Component } from \"react\";\nimport { Loader, Header, Label } from \"semantic-ui-react\";\nimport {\n XYPlot,\n HorizontalGridLines,\n Hint,\n MarkSeries,\n VerticalGridLines,\n} from \"react-vis\";\nimport Dimensions from \"react-dimensions\";\nimport { connect } from \"react-redux\";\nimport { serverAddress } from \"../api_client/apiClient\";\nimport { clusterFaces } from \"../actions/facesActions\";\nimport { SecuredImageJWT } from \"./SecuredImage\";\nexport class FaceClusterScatter extends Component {\n state = {\n crosshairValues: [],\n hintValue: null,\n };\n\n componentWillMount() {\n this.props.dispatch(clusterFaces());\n }\n render() {\n var person_names = [\n ...new Set(\n this.props.facesVis.map(function (el) {\n return el.person_name;\n })\n ),\n ];\n var facesVis = this.props.facesVis;\n\n var mappedScatter = person_names.map(function (person_name, idx) {\n var thisPersonVis = facesVis.filter(function (el) {\n return person_name === el.person_name;\n });\n var thisPersonData = thisPersonVis.map(function (el) {\n return {\n x: el.value.x,\n y: el.value.y,\n size: el.value.size,\n name: el.person_name,\n color: el.color,\n face_url: el.face_url,\n photo: el.photo,\n };\n });\n return (\n {\n this.setState({ hintValue: d });\n }}\n data={thisPersonData}\n />\n );\n }, this);\n if (this.props.clustered) {\n return (\n
\n
\n Face Embeddings\n \n People with similar looking faces should be grouped closer\n together in this plot (Click on a point to see the label).\n \n
\n\n \n \n \n {mappedScatter}\n {this.state.hintValue && (\n \n \n \n )}\n \n
\n );\n } else {\n return (\n
\n \n
\n );\n }\n }\n}\n\nFaceClusterScatter = connect((store) => {\n return {\n facesVis: store.faces.facesVis,\n training: store.faces.training,\n trained: store.faces.trained,\n clustering: store.faces.clustering,\n clustered: store.faces.clustered,\n };\n})(FaceClusterScatter);\n\nexport default Dimensions()(FaceClusterScatter);\n" }, { "path": "src/components/faces.js", "content": "import React, { Component } from 'react';\nimport { connect } from \"react-redux\";\nimport { Image, Header, Message, Dropdown, Divider, Card, \n Container, Segment, Button, Icon, Popup, Loader, \n Dimmer, Grid, Reveal, Statistic, Label, Table,\n Modal } from 'semantic-ui-react';\nimport { fetchPeople, \n addPerson ,\n addPersonAndSetLabelToFace} from '../actions/peopleActions';\nimport { fetchFaces, \n fetchLabeledFaces,\n fetchInferredFaces,\n deleteFaceAndFetchNext, \n labelFacePerson ,\n fetchFaceToLabel,\n loadFaceToLabel,\n trainFaces,\n labelFacePersonAndFetchNext} from '../actions/facesActions';\nimport VisibilitySensor from 'react-visibility-sensor'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\n\n\nexport class FaceStatistics extends Component {\n render() {\n return (\n \n \n {this.props.labeledFaces.length}\n Labelled\n \n \n {this.props.inferredFaces.length}\n Inferred\n \n \n )\n }\n}\n\n\nexport class EditableFaceIcon extends Component {\n state = {}\n\n handleShow = () => this.setState({ active: true })\n handleHide = () => this.setState({ active: false })\n handleClick = () => this.props.dispatch(loadFaceToLabel(this.props.face))\n\n render() {\n const { active } = this.state\n const content = (\n \n )\n return (\n \n }>\n }\n content={this.props.person_name}/>\n \n )\n }\n}\n\nexport class FaceTableLabeled extends Component{\n componentWillMount() {\n this.props.dispatch(fetchLabeledFaces())\n }\n render() {\n var person_names = [... new Set(this.props.labeledFaces.map(function(face){return face.person.name}))]\n var faces = this.props.labeledFaces\n var mappedRows = person_names.map(function(person_name){\n var thisPersonsFaces = faces.filter(function(face){\n return person_name===face.person.name\n })\n var mappedFaceIcons = thisPersonsFaces.map(function(face){\n return (\n \n )\n })\n return (\n \n {person_name}\n {mappedFaceIcons}\n \n )\n })\n return (\n \n \n \n Person\n Faces\n \n \n \n {mappedRows}\n \n
\n )\n }\n}\n\nexport class FaceTableInferred extends Component{\n componentWillMount() {\n this.props.dispatch(fetchInferredFaces())\n }\n render() {\n var person_names = [... new Set(this.props.inferredFaces.map(function(face){return face.person.name}))]\n var faces = this.props.inferredFaces\n var mappedRows = person_names.map(function(person_name){\n var thisPersonsFaces = faces.filter(function(face){\n return person_name===face.person.name\n })\n var mappedFaceIcons = thisPersonsFaces.map(function(face){\n return (\n \n )\n })\n return (\n \n {person_name}\n {mappedFaceIcons}\n \n )\n })\n return (\n \n \n \n Person\n Faces\n \n \n \n {mappedRows}\n \n
\n )\n }\n}\n\n\n\nexport class FacesLabeled extends Component {\n componentWillMount() {\n this.props.dispatch(fetchLabeledFaces())\n }\n render() {\n var mappedFaceCards = this.props.labeledFaces.map(function(face){\n return (\n \n )\n })\n return (\n \n
\n Labeled Faces\n \n
\n {mappedFaceCards}\n \n )\n }\n}\n\nexport class FacesInferred extends Component {\n componentWillMount() {\n this.props.dispatch(fetchInferredFaces())\n }\n render() {\n var mappedFaceCards = this.props.inferredFaces.map(function(face){\n return (\n \n )\n })\n return (\n \n
\n Inferred Faces\n \n
\n {mappedFaceCards}\n \n )\n }\n}\n\n\nexport class FaceCards extends Component {\n componentWillMount() {\n this.props.dispatch(fetchFaces())\n this.props.dispatch(fetchPeople())\n }\n\n render() {\n var mappedFaceCards = this.props.faces.map(function(face){\n return (\n \n )\n })\n return (\n
\n \n \n {mappedFaceCards}\n \n
\n )\n }\n}\n\nexport class FaceToLabel extends Component {\n componentWillMount() {\n this.props.dispatch(fetchFaceToLabel())\n this.props.dispatch(fetchPeople())\n }\n\n render() {\n console.log(this.props)\n return (\n \n )\n }\n}\n\n\nexport class FaceCard extends Component {\n state = { modalOpen: false }\n handleOpen = () => this.setState({ modalOpen: true })\n handleClose = () => this.setState({ modalOpen: false })\n\n render() {\n let image = null;\n if (this.props.card_loading){\n image = (\n
\n \n \n \n \n
\n )\n }\n else {\n image = \n }\n\n if (this.props.face_id == null){\n return (\n \n \n \n {image}\n {\"No more face to label!\"}\n \n \n \n \n \n \n )\n }\n\n return (\n
\n \n \n \n {image}\n {\"Who is this person?\"}\n \n \n \n \n \n \n\n\n
\n );\n }\n}\n\nexport class FaceCardMenu extends Component {\n handleAddPerson = (e, {value}) => {\n console.log('handing add', value, this.props.face_id)\n this.props.dispatch(addPerson(value))\n this.currentValue = value\n }\n\n handleChange = (e, {value}) => {\n console.log('handing change')\n this.currentValue = value\n }\n\n handleDeleteFace = e => {\n this.props.dispatch(deleteFaceAndFetchNext(this.props.face_id))\n }\n\n handleSubmit = e => {\n this.props.dispatch(labelFacePersonAndFetchNext(this.props.face_id,this.currentValue))\n }\n\n render() {\n if (this.props.face_id == null){\n var buttonGroup = (\n }\n position=\"top center\"\n content=\"Woohoo!\"\n size=\"tiny\"\n inverted\n basic/>\n )\n }\n else {\n var buttonGroup = (\n
\n }\n position=\"top center\"\n content=\"Forget this face\"\n size=\"tiny\"\n inverted\n basic/>\n\n \n }\n on='hover'\n flowing\n hideOnScroll\n position=\"bottom center\"\n content={}/>\n \n {this.props.dispatch(trainFaces())}}>\n \n \n }\n inverted\n size=\"tiny\"\n position=\"top center\"\n content=\"Train the classifier\"/> \n\n }\n position=\"top center\"\n content=\"Submit label and show next face\"\n size=\"tiny\"\n inverted\n basic/>\n
\n )\n }\n\n return (\n
\n \n \n {buttonGroup}\n
\n )\n } \n}\n\nEditableFaceIcon = connect((store)=>{\n return {\n faceToLabel: store.faces.faceToLabel\n }\n})(EditableFaceIcon)\n\nFaceTableInferred = connect((store)=>{\n return {\n inferredFaces: store.faces.inferredFaces\n }\n})(FaceTableInferred)\n\nFaceTableLabeled = connect((store)=>{\n return {\n labeledFaces: store.faces.labeledFaces,\n }\n})(FaceTableLabeled)\n\nFaceStatistics = connect((store)=>{\n return {\n labeledFaces: store.faces.labeledFaces,\n inferredFaces: store.faces.inferredFaces\n }\n})(FaceStatistics)\n\nFacesLabeled = connect((store)=>{\n return {\n labeledFaces: store.faces.labeledFaces,\n fetchingLabeledFaces: store.faces.fetchingLabeledFaces,\n fetchedLabeledFaces: store.faces.fetchedLabeledFaces\n }\n})(FacesLabeled)\n\nFacesInferred = connect((store)=>{\n return {\n inferredFaces: store.faces.inferredFaces,\n fetchingInferredFaces: store.faces.fetchingInferredFaces,\n fetchedInferredFaces: store.faces.fetchedInferredFaces\n }\n})(FacesInferred)\n\nFaceToLabel = connect((store)=>{\n return {\n faceToLabel: store.faces.faceToLabel,\n facesFetched:store.faces.fetched,\n faceToLabelFetching: store.faces.fetchingFaceToLabel,\n faceToLabelFetched: store.faces.fetchedFaceToLabel,\n }\n})(FaceToLabel)\n\nFaceCards = connect((store)=>{\n return {\n faces: store.faces.faces,\n faceToLabel: store.faces.faceToLabel,\n facesFetched:store.faces.fetched\n }\n})(FaceCards)\n\nFaceCard = connect((store)=>{\n return {\n people: store.people.people,\n peopleFetching: store.people.fetching,\n training: store.faces.training\n }\n})(FaceCard)\n\nFaceCardMenu = connect((store)=>{\n return {\n training: store.faces.training,\n faceToLabel: store.faces.faceToLabel,\n people: store.people.people,\n peopleFetching: store.people.fetching,\n personAdding: store.people.adding,\n }\n})(FaceCardMenu)\n" }, { "path": "src/components/imageInfoTable.js", "content": "import React, {Component} from 'react'\nimport {Table, Header, Divider, Rating, Grid, List} from 'semantic-ui-react'\nimport { connect } from \"react-redux\";\nimport {LocationMap} from \"./maps\"\n\nexport class ImageInfoTable extends Component {\n\trender() {\n var photo = this.props.photo\n console.log(photo)\n if (photo.exif_json != null){\n var exif = photo.exif_json\n }\n else {\n var exif = {}\n }\n\n if (photo.geolocation_json.features != undefined && photo.geolocation_json.features.length > 0){\n var geolocation = photo.search_location\n\t\t}\n\t\telse {\n\t\t\tvar geolocation = 'No location information'\n\t\t}\n\n if (photo.people != null && Object.keys(photo.people).length > 0){\n var people = photo.people\n }\n else {\n var people = [\"Could not find faces.\"]\n }\n\n if (photo.search_captions != null) {\n var captions = photo.search_captions.split(\",\").map((caption)=>{caption})\n } \n else {\n var captions = null\n }\n\n\t\treturn (\n
\n\n
\n
Map
\n \n
\n\n
\n \n \n \n
EXIF Information
\n \n \n \n Width\n {exif['EXIF ExifImageWidth']}\n \n \n Length\n {exif['EXIF ExifImageLength']}\n \n \n Aperture\n {exif['EXIF ApertureValue']}\n \n \n Exposure\n {exif['EXIF ExposureTime']}\n \n \n Shutter Speed\n {exif['EXIF ShutterSpeedValue']}\n \n \n Lens\n {exif['EXIF LensModel']}\n \n \n Camera\n {exif['Image Model']}\n \n \n Time Taken\n {exif['EXIF DateTimeOriginal']}\n \n \n Location\n {geolocation}\n \n \n
\n \n \n
Captions
\n \n {captions}\n \n \n \n
People
\n \n {photo.people.map((person)=>{person})}\n \n \n \n \n
\n
\n\t\t)\t\t\t\n\t}\n}" }, { "path": "src/components/lightBox.js", "content": "import React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport \"react-virtualized/styles.css\"; // only needs to be imported once\nimport { connect } from \"react-redux\";\nimport {\n fetchDateAlbumsPhotoHashList,\n fetchAlbumsDateGalleries\n} from \"../actions/albumsActions\";\nimport { copyToClipboard } from \"../util/util\";\nimport {\n fetchPhotoDetail,\n setPhotosFavorite,\n setPhotosHidden,\n setPhotosPublic,\n generatePhotoIm2txtCaption\n} from \"../actions/photosActions\";\nimport {\n Card,\n Image,\n Header,\n Divider,\n Item,\n Loader,\n Dimmer,\n Form,\n Modal,\n Sticky,\n Portal,\n Grid,\n List as ListSUI,\n Container,\n Label,\n Popup,\n Segment,\n Button,\n Input,\n Icon,\n Table,\n Transition,\n Breadcrumb\n} from \"semantic-ui-react\";\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport LazyLoad from \"react-lazyload\";\nimport Lightbox from \"react-image-lightbox\";\nimport { LocationMap } from \"../components/maps\";\nimport { push } from \"react-router-redux\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport styles from \"../App.css\";\nimport Draggable from \"react-draggable\";\nimport debounce from \"lodash/debounce\";\nimport * as moment from \"moment\";\nimport { Link } from \"react-router-dom\";\n\nvar topMenuHeight = 55; // don't change this\nvar leftMenuWidth = 85; // don't change this\nvar SIDEBAR_WIDTH = 85;\nvar timelineScrollWidth = 0;\nvar DAY_HEADER_HEIGHT = 35;\n\nif (window.innerWidth < 600) {\n var LIGHTBOX_SIDEBAR_WIDTH = window.innerWidth;\n} else {\n var LIGHTBOX_SIDEBAR_WIDTH = 360;\n}\n\nconst colors = [\n \"red\",\n \"orange\",\n \"yellow\",\n \"olive\",\n \"green\",\n \"teal\",\n \"blue\",\n \"violet\",\n \"purple\",\n \"pink\",\n \"brown\",\n \"grey\",\n \"black\"\n];\n\nexport class LightBox extends Component {\n state = {\n lightboxSidebarShow: false\n };\n\n render() {\n const authGetParams = !this.props.isPublic\n ? \"?jwt=\" + this.props.auth.access.token\n : \"\";\n if (\n !this.props.photoDetails[\n this.props.idx2hash.slice(this.props.lightboxImageIndex)[0]\n ]\n ) {\n console.log(\"light box has not gotten main photo detail\");\n var mainSrc = \"/transparentbackground.png\";\n var mainSrcThumbnail = \"/transparentbackground.png\";\n } else {\n console.log(\"light box has got main photo detail\");\n var mainSrc =\n serverAddress +\n \"/media/thumbnails_big/\" +\n this.props.idx2hash.slice(this.props.lightboxImageIndex)[0] +\n \".jpg\";\n var mainSrcThumbnail =\n serverAddress +\n \"/media/thumbnails_small/\" +\n this.props.idx2hash.slice(this.props.lightboxImageIndex)[0] +\n \".jpg\";\n if (\n this.props.photoDetails[\n this.props.idx2hash.slice(this.props.lightboxImageIndex)[0]\n ].hidden &&\n !this.props.showHidden\n ) {\n var mainSrc = \"/hidden.png\";\n var mainSrcThumbnail = \"/hidden.png\";\n }\n }\n\n return (\n
\n \n {!this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n \n \n \n )}\n {!this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n \n \n \n )}\n {!this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n \n \n \n )}\n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n {\n const image_hash = this.props.idx2hash[\n this.props.lightboxImageIndex\n ];\n const val = !this.props.photoDetails[image_hash].hidden;\n this.props.dispatch(setPhotosHidden([image_hash], val));\n }}\n color=\"black\"\n icon\n circular\n >\n \n \n )}\n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n {\n const image_hash = this.props.idx2hash[\n this.props.lightboxImageIndex\n ];\n const val = !this.props.photoDetails[image_hash].favorited;\n this.props.dispatch(setPhotosFavorite([image_hash], val));\n }}\n color=\"black\"\n icon\n circular\n >\n \n \n )}\n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ] && (\n {\n const image_hash = this.props.idx2hash[\n this.props.lightboxImageIndex\n ];\n const val = !this.props.photoDetails[image_hash].public;\n this.props.dispatch(setPhotosPublic([image_hash], val));\n copyToClipboard(\n serverAddress.replace('//','') + \"/media/thumbnails_big/\" + image_hash + \".jpg\"\n );\n }}\n color=\"black\"\n icon\n circular\n >\n \n \n )}\n {\n this.setState({\n lightboxSidebarShow: !this.state.lightboxSidebarShow\n });\n }}\n >\n \n \n
\n ]}\n onCloseRequest={this.props.onCloseRequest}\n onAfterOpen={() => {\n console.log(\"lightbox trying to fetch photo detail\");\n this.props.onImageLoad();\n }}\n onMovePrevRequest={this.props.onMovePrevRequest}\n onMoveNextRequest={this.props.onMoveNextRequest}\n sidebarWidth={\n this.state.lightboxSidebarShow ? LIGHTBOX_SIDEBAR_WIDTH : 0\n }\n reactModalStyle={{\n content: {\n // transform: this.state.lightboxSidebarShow ? `scale(0.5,1)` : ''\n // right: this.state.lightboxSidebarShow ? LIGHTBOX_SIDEBAR_WIDTH : 0,\n // width: this.state.lightboxSidebarShow ? window.innerWidth - LIGHTBOX_SIDEBAR_WIDTH : window.innerWidth,\n },\n overlay: {\n right: this.state.lightboxSidebarShow\n ? LIGHTBOX_SIDEBAR_WIDTH\n : 0,\n width: this.state.lightboxSidebarShow\n ? window.innerWidth - LIGHTBOX_SIDEBAR_WIDTH\n : window.innerWidth\n }\n }}\n />\n \n \n {this.props.photoDetails.hasOwnProperty(\n this.props.idx2hash[this.props.lightboxImageIndex]\n ) && (\n
\n \n {\n this.setState({ lightboxSidebarShow: false });\n this.forceUpdate();\n }}\n />\n
Details
\n\n \n \n \n \n Time Taken\n \n \n {moment.utc(\n this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].exif_timestamp\n ).format(\"dddd, MMMM Do YYYY, h:mm a\")}\n \n \n \n\n \n \n \n File Path\n \n \n {\n return { key: el, content: el };\n })}\n />\n \n \n \n\n { this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].people.length > 0 &&\n (\n \n \n People\n \n \n \n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].people.map((nc, idx) => (\n {\n this.props.dispatch(searchPhotos(nc));\n this.props.dispatch(push(\"/search\"));\n }}\n >\n \n {nc}\n \n ))}\n \n \n \n )\n }\n\n {\n this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].search_location &&\n (\n \n \n Location\n \n \n {\n this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].search_location\n }\n \n \n )\n }\n\n \n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].exif_gps_lat && (\n \n )}\n
\n\n \n \n \n Caption\n \n \n {false &&\n this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].captions_json.im2txt}\n
\n \n {\n this.props.photoDetails[\n this.props.idx2hash[\n this.props.lightboxImageIndex\n ]\n ].captions_json.im2txt\n }\n \n \n Submit\n \n {this.props.dispatch(generatePhotoIm2txtCaption(this.props.idx2hash[this.props.lightboxImageIndex]))}}\n disabled={this.props.isPublic | this.props.generatingCaptionIm2txt}\n floated=\"left\"\n size=\"small\"\n color=\"blue\"\n >\n Generate\n \n \n Cancel\n \n \n
\n \n \n\n \n \n \n Scene\n \n \n

\n Attributes\n

\n \n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].captions_json.places365.attributes.map(\n (nc, idx) => (\n {\n this.props.dispatch(searchPhotos(nc));\n this.props.dispatch(push(\"/search\"));\n }}\n >\n {nc}\n \n )\n )}\n \n

\n Categories\n

\n \n {this.props.photoDetails[\n this.props.idx2hash[this.props.lightboxImageIndex]\n ].captions_json.places365.categories.map(\n (nc, idx) => (\n {\n this.props.dispatch(searchPhotos(nc));\n this.props.dispatch(push(\"/search\"));\n }}\n >\n {nc}\n \n )\n )}\n \n \n \n \n \n \n \n Similar Photos\n \n \n \n {\n this.props.photoDetails[\n this.props.idx2hash[\n this.props.lightboxImageIndex\n ]\n ].similar_photos.slice(0,30).map(el=>(\n \n ))\n }\n \n \n \n \n\n \n \n \n )}\n \n \n \n );\n }\n}\n\nLightBox = connect(store => {\n return {\n auth: store.auth,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n generatingCaptionIm2txt: store.photos.generatingCaptionIm2txt,\n generatedCaptionIm2txt: store.photos.generatedCaptionIm2txt,\n photos: store.photos.photos\n // idx2hash: store.albums.idx2hash,\n // albumsDatePhotoHashList: store.albums.albumsDatePhotoHashList,\n // fetchingAlbumsDatePhotoHashList: store.albums.fetchingAlbumsDatePhotoHashList,\n // fetchedAlbumsDatePhotoHashList: store.albums.fetchedAlbumsDatePhotoHashList,\n };\n})(LightBox);\n" }, { "path": "src/components/locationDurationStackedBar.js", "content": "import React, {Component} from 'react'\nimport {Label,Grid, Segment, Header, Loader} from 'semantic-ui-react'\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport {fetchDateAlbumsList, fetchAutoAlbumsList} from '../actions/albumsActions'\nimport {fetchLocationTimeline} from '../actions/utilActions'\n\nimport Month from 'calendar-months';\nimport {Chart, Bars, Lines, Ticks, Layer, Transform, Handlers} from 'rumble-charts'\nimport moment from 'moment'\n\nimport {\n Hint,\n XYPlot,\n XAxis,\n YAxis,\n VerticalGridLines,\n HorizontalGridLines,\n HorizontalBarSeries,\n HorizontalBarSeriesCanvas\n} from 'react-vis'\n/*\n{\n x: el.value.x,\n y: el.value.y,\n size: el.value.size,\n name: el.person_name,\n}\n*/\n\nexport class LocationDurationStackedBar extends Component {\n state = {hintValue:null}\n\n componentWillMount() {\n if (!this.props.fetchedLocationTimeline){\n this.props.dispatch(fetchLocationTimeline())\n }\n }\n\n\n render() {\n if (this.props.fetchedLocationTimeline){\n return (\n
\n
Location Timeline
\n
\n\n\n \n {\n return(moment.unix(this.props.locationTimeline[0].start+ v).format('YYYY-MM'))\n }}/>\n\n {this.props.locationTimeline.map((el)=>\n {\n this.setState({hintValue:d})\n }}\n style={{fill:el.color,stroke:el.color}}\n data={[{\n y:1,\n x:el.data[0],\n loc:el.loc,\n start:el.start,\n end:el.end\n }]}/>\n )}\n \n { this.state.hintValue && (\n \n \n \n )} \n\n\n \n\n\n
\n
\n )\n } else {\n return (\n
\n
Location Timeline
\n \n \n \n
\n )\n }\n }\n}\n\nLocationDurationStackedBar = connect((store)=>{\n return {\n locationTimeline: store.util.locationTimeline,\n fetchingLocationTimeline: store.util.fetchingLocationTimeline,\n fetchedLocationTimeline: store.util.fetchedLocationTimeline,\n }\n})(LocationDurationStackedBar)\n\n\nexport default Dimensions()(LocationDurationStackedBar)\n\n\n// \n// \n// \n// \n// \n// \n// \n" }, { "path": "src/components/locationLink.js", "content": "import React from \"react\";\nimport { Group } from \"@vx/group\";\nimport { Tree } from \"@vx/hierarchy\";\nimport { LinearGradient } from \"@vx/gradient\";\nimport { hierarchy } from \"d3-hierarchy\";\nimport { pointRadial } from \"d3-shape\";\nimport { fetchLocationSunburst } from \"../actions/utilActions\";\nimport { connect } from \"react-redux\";\nimport { Dropdown, Form } from \"semantic-ui-react\";\n\nimport {\n LinkHorizontal,\n LinkVertical,\n LinkRadial,\n LinkHorizontalStep,\n LinkVerticalStep,\n LinkRadialStep,\n LinkHorizontalCurve,\n LinkVerticalCurve,\n LinkRadialCurve,\n LinkHorizontalLine,\n LinkVerticalLine,\n LinkRadialLine\n} from \"@vx/shape\";\n\nexport class LocationLink extends React.Component {\n state = {\n layout: \"cartesian\",\n orientation: \"horizontal\",\n linkType: \"diagonal\",\n stepPercent: 0.5\n };\n\n componentWillMount() {\n if (!this.props.locationSunburst.children) {\n this.props.dispatch(fetchLocationSunburst());\n }\n }\n\n render() {\n const {\n // data,\n width,\n height,\n events = false,\n margin = {\n top: 20,\n left: 70,\n right: 70,\n bottom: 20\n }\n } = this.props;\n const { layout, orientation, linkType, stepPercent } = this.state;\n\n if (width < 10) return null;\n if (this.props.fetchedLocationSunburst) return null;\n\n const innerWidth = width - margin.left - margin.right;\n const innerHeight = height - margin.top - margin.bottom;\n\n let origin;\n let sizeWidth;\n let sizeHeight;\n\n if (layout === \"polar\") {\n origin = {\n x: innerWidth / 2,\n y: innerHeight / 2\n };\n sizeWidth = 2 * Math.PI;\n sizeHeight = Math.min(innerWidth, innerHeight) / 2;\n } else {\n origin = { x: 0, y: 0 };\n if (orientation === \"vertical\") {\n sizeWidth = innerWidth;\n sizeHeight = innerHeight;\n } else {\n sizeWidth = innerHeight;\n sizeHeight = innerWidth;\n }\n }\n\n return (\n
\n
\n
\n \n this.setState({ layout: d.value })}\n options={[\n { text: \"cartesian\", value: \"cartesian\" },\n { text: \"polar\", value: \"polar\" }\n ]}\n defaultValue={layout}\n />\n\n this.setState({ orientation: d.value })}\n defaultValue={orientation}\n options={[\n { text: \"vertical\", value: \"vertical\" },\n { text: \"horizontal\", value: \"horizontal\" }\n ]}\n disabled={layout === \"polar\"}\n />\n\n this.setState({ linkType: d.value })}\n options={[\n { text: \"diagonal\", value: \"diagonal\" },\n { text: \"step\", value: \"step\" },\n { text: \"curve\", value: \"curve\" },\n { text: \"line\", value: \"line\" }\n ]}\n defaultValue={linkType}\n />\n \n
\n
\n\n \n \n \n (d.isExpanded ? d.children : null)\n )}\n size={[sizeWidth, sizeHeight]}\n separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}\n >\n {({ data }) => (\n \n {data.links().map((link, i) => {\n let LinkComponent;\n\n if (layout === \"polar\") {\n if (linkType === \"step\") {\n LinkComponent = LinkRadialStep;\n } else if (linkType === \"curve\") {\n LinkComponent = LinkRadialCurve;\n } else if (linkType === \"line\") {\n LinkComponent = LinkRadialLine;\n } else {\n LinkComponent = LinkRadial;\n }\n } else {\n if (orientation === \"vertical\") {\n if (linkType === \"step\") {\n LinkComponent = LinkVerticalStep;\n } else if (linkType === \"curve\") {\n LinkComponent = LinkVerticalCurve;\n } else if (linkType === \"line\") {\n LinkComponent = LinkVerticalLine;\n } else {\n LinkComponent = LinkVertical;\n }\n } else {\n if (linkType === \"step\") {\n LinkComponent = LinkHorizontalStep;\n } else if (linkType === \"curve\") {\n LinkComponent = LinkHorizontalCurve;\n } else if (linkType === \"line\") {\n LinkComponent = LinkHorizontalLine;\n } else {\n LinkComponent = LinkHorizontal;\n }\n }\n }\n\n return (\n \n );\n })}\n\n {data.descendants().map((node, key) => {\n const width = 120;\n const height = 30;\n\n let top;\n let left;\n if (layout === \"polar\") {\n const [radialX, radialY] = pointRadial(node.x, node.y);\n top = radialY;\n left = radialX;\n } else {\n if (orientation === \"vertical\") {\n top = node.y;\n left = node.x;\n } else {\n top = node.x;\n left = node.y;\n }\n }\n\n return (\n \n {node.depth === 0 && (\n {\n node.data.isExpanded = !node.data.isExpanded;\n this.forceUpdate();\n }}\n />\n )}\n {node.depth !== 0 && (\n {\n node.data.isExpanded = !node.data.isExpanded;\n this.forceUpdate();\n }}\n />\n )}\n \n {node.data.name}\n \n \n );\n })}\n \n )}\n \n \n
\n );\n }\n}\n\nLocationLink = connect(store => {\n return {\n locationSunburst: store.util.locationSunburst,\n fetchingLocationSunburst: store.util.fetchingLocationSunburst,\n fetchedLocationSunburst: store.util.fetechedLocationSunburst\n };\n})(LocationLink);\n" }, { "path": "src/components/maps.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Loader, Flag, Segment, Image, Header, Icon } from \"semantic-ui-react\";\nimport { Map, TileLayer, Marker, Popup } from \"react-leaflet\";\nimport { scanPhotos, fetchPhotos } from \"../actions/photosActions\";\nimport { fetchAutoAlbumsList } from \"../actions/albumsActions\";\nimport { fetchLocationClusters } from \"../actions/utilActions\";\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport MarkerClusterGroup from \"react-leaflet-markercluster\";\nimport { fetchPlaceAlbumsList } from \"../actions/albumsActions\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { countryNames } from \"../util/countryNames\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\nimport _ from \"lodash\";\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class LocationMap extends Component {\n render() {\n var photosWithGPS = this.props.photos.filter(function(photo) {\n if (photo.exif_gps_lon !== null && photo.exif_gps_lon) {\n return true;\n } else {\n return false;\n }\n });\n\n var sum_lat = 0;\n var sum_lon = 0;\n for (var i = 0; i < photosWithGPS.length; i++) {\n sum_lat += parseFloat(photosWithGPS[i].exif_gps_lat);\n sum_lon += parseFloat(photosWithGPS[i].exif_gps_lon);\n }\n var avg_lat = sum_lat / photosWithGPS.length;\n var avg_lon = sum_lon / photosWithGPS.length;\n\n var markers = photosWithGPS.map(function(photo) {\n return (\n \n \n
\n \n
\n \n \n );\n });\n console.log(markers);\n\n if (photosWithGPS.length > 0) {\n if (this.props.zoom) {\n var zoom = this.props.zoom;\n } else {\n var zoom = 2;\n }\n return (\n \n \n OpenStreetMap contributors\"\n url=\"http://{s}.tile.osm.org/{z}/{x}/{y}.png\"\n />\n {markers}\n \n \n );\n } else {\n return (\n \n Map loading...\n \n );\n }\n }\n}\n\nexport class EventMap extends Component {\n constructor(props) {\n super(props);\n this.preprocess = this.preprocess.bind(this);\n }\n\n componentDidMount() {\n this.props.dispatch(fetchAutoAlbumsList());\n }\n\n preprocess() {\n var eventsWithGPS = this.props.albumsAutoList.filter(function(album) {\n if (album.gps_lat != null && album.gps_lon != null) {\n return true;\n } else {\n return false;\n }\n });\n\n var sum_lat = 0;\n var sum_lon = 0;\n for (var i = 0; i < eventsWithGPS.length; i++) {\n sum_lat += parseFloat(eventsWithGPS[i].gps_lat);\n sum_lon += parseFloat(eventsWithGPS[i].gps_lon);\n }\n var avg_lat = sum_lat / eventsWithGPS.length;\n var avg_lon = sum_lon / eventsWithGPS.length;\n\n var markers = eventsWithGPS.map(function(album) {\n return ;\n });\n return [avg_lat, avg_lon, markers];\n }\n\n render() {\n if (this.props.fetchedAlbumsAutoList) {\n var res = this.preprocess();\n var avg_lat = res[0];\n var avg_lon = res[1];\n var markers = res[2];\n\n return (\n
\n \n OpenStreetMap contributors\"\n url=\"http://{s}.tile.osm.org/{z}/{x}/{y}.png\"\n />\n {markers}\n \n
\n );\n } else {\n return
;\n }\n }\n}\n\nexport class LocationClusterMap extends Component {\n state = {\n visibleMarkers: [],\n visiblePlaceAlbums: [],\n locationClusters: [],\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200,\n gridHeight: window.innerHeight - topMenuHeight - 300,\n headerHeight: 60,\n numEntrySquaresPerRow: 3\n };\n\n constructor(props) {\n super(props);\n this.mapRef = React.createRef();\n this.preprocess = this.preprocess.bind(this);\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n }\n\n componentDidMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize);\n if (this.props.albumsPlaceList.length === 0) {\n this.props.dispatch(fetchPlaceAlbumsList());\n }\n if (!this.props.fetchedLocationClusters) {\n this.props.dispatch(fetchLocationClusters());\n }\n }\n\n onViewportChanged = viewport => {\n console.log(viewport);\n this.setState({ viewport });\n const bounds = this.mapRef.current.leafletElement.getBounds();\n\n const visibleMarkers = this.props.locationClusters.filter(loc => {\n const markerLat = loc[0];\n const markerLng = loc[1];\n if (\n markerLat < bounds._northEast.lat &&\n markerLat > bounds._southWest.lat &&\n markerLng < bounds._northEast.lng &&\n markerLng > bounds._southWest.lng\n ) {\n return true;\n } else {\n return false;\n }\n });\n\n const visiblePlaceNames = visibleMarkers.map(el => el[2]);\n\n const visiblePlaceAlbums = this.props.albumsPlaceList.filter(el => {\n if (visiblePlaceNames.includes(el.title)) {\n return true;\n } else {\n return false;\n }\n });\n\n console.log(visibleMarkers);\n this.setState({\n visibleMarkers: visibleMarkers,\n visiblePlaceAlbums: _.sortBy(visiblePlaceAlbums, [\n \"geolocation_level\",\n \"photo_count\"\n ])\n });\n };\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.locationClusters.length === 0) {\n const visibleMarkers = nextProps.locationClusters;\n const visiblePlaceNames = visibleMarkers.map(el => el[2]);\n const visiblePlaceAlbums = nextProps.albumsPlaceList.filter(el => {\n if (visiblePlaceNames.includes(el.title)) {\n return true;\n } else {\n return false;\n }\n });\n\n return {\n visibleMarkers: nextProps.locationClusters,\n locationClusters: nextProps.locationClusters,\n visiblePlaceAlbums: _.sortBy(visiblePlaceAlbums, [\n \"geolocation_level\",\n \"photo_count\"\n ])\n };\n } else {\n return { ...prevState };\n }\n }\n\n preprocess() {\n var markers = this.props.locationClusters.map(function(loc) {\n if (loc[0] !== 0) {\n return ;\n }\n });\n return markers;\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.calculateEntrySquareSize);\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n ...this.state,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var place = this.state.visiblePlaceAlbums;\n var albumPlaceIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumPlaceIndex < place.length) {\n return (\n
\n {\n // store.dispatch(push(`/place/${this.props.albumsPlaceList[albumPlaceIndex].id}/`))\n // store.dispatch(searchPhotos(this.props.albumsPlaceList[albumPlaceIndex].title))\n // store.dispatch(push('/search'))\n }}\n style={{ padding: 5 }}\n >\n {place[albumPlaceIndex].cover_photos.slice(0, 1).map(photo => {\n return (\n \n );\n })}\n
\n
\n {countryNames.includes(\n place[albumPlaceIndex].title.toLowerCase()\n ) ? (\n \n ) : (\n \"\"\n )}\n {place[albumPlaceIndex].title}\n
{place[albumPlaceIndex].photo_count} Photos\n
\n
\n );\n } else {\n return
;\n }\n };\n\n render() {\n console.log(this.state);\n if (this.props.fetchedLocationClusters) {\n var markers = this.preprocess();\n\n return (\n
\n \n
\n \n \n Places{\" \"}\n \n \n Showing {this.state.visiblePlaceAlbums.length} places on the map\n \n \n
\n
\n
\n \n OpenStreetMap contributors\"\n url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n />\n {markers}\n \n
\n \n {({ width }) => (\n \n )}\n \n
\n );\n } else {\n return (\n
\n Map loading...\n
\n );\n }\n }\n}\n\nexport class AllPhotosMap extends Component {\n componentDidMount() {\n this.props.dispatch(fetchPhotos());\n }\n\n render() {\n if (this.props.fetchedPhotos) {\n var map = ;\n } else {\n var map =
;\n }\n return
{map}
;\n }\n}\n\nAllPhotosMap = connect(store => {\n return {\n photos: store.photos.photos,\n fetchingPhotos: store.photos.fetchingPhotos,\n fetchedPhotos: store.photos.fetchedPhotos\n };\n})(AllPhotosMap);\n\nEventMap = connect(store => {\n return {\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList\n };\n})(EventMap);\n\nLocationClusterMap = connect(store => {\n return {\n albumsPlaceList: store.albums.albumsPlaceList,\n locationClusters: store.util.locationClusters,\n fetchingLocationClusters: store.util.fetchingLocationClusters,\n fetchedLocationClusters: store.util.fetchedLocationClusters\n };\n})(LocationClusterMap);\n" }, { "path": "src/components/modalPhotoView.js", "content": "import React, {Component} from 'react';\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer, Modal, Grid, \n Container, Label, Popup, Segment, Button, Icon, Table} from 'semantic-ui-react';\n\nimport {ImageInfoTable} from './imageInfoTable';\nimport {serverAddress} from '../api_client/apiClient'\n\n\nexport class ModalPhotoViewVertical extends Component {\n constructor() {\n super();\n this.state = {\n width: 100,\n height: 100,\n }\n }\n /**\n * Calculate & Update state of new dimensions\n */\n updateDimensions() {\n if (this.props.photos.length > 0) { \n var update_height = window.innerHeight-100;\n var update_width = update_height*this.props.photos[this.props.idx].thumbnail_width/this.props.photos[this.props.idx].thumbnail_height\n\n if (update_width > window.innerWidth-100) {\n var update_width = window.innerWidth-100\n var update_height = update_width*this.props.photos[this.props.idx].thumbnail_height/this.props.photos[this.props.idx].thumbnail_width\n }\n if (this.refs.modalPhotoViewRef){\n this.setState({ width: update_width, height: update_height });\n }\n }\n }\n\n\n\n /**\n * Add event listener\n */\n componentDidMount() {\n this.updateDimensions();\n window.addEventListener(\"resize\", this.updateDimensions.bind(this));\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.updateDimensions.bind(this)); \n }\n\n render() {\n if (this.props.photos.length > 0) {\n var update_height = window.innerHeight-100;\n var update_width = update_height*this.props.photos[this.props.idx].thumbnail_width/this.props.photos[this.props.idx].thumbnail_height\n\n if (update_width > window.innerWidth-100) {\n var update_width = window.innerWidth-100\n var update_height = update_width*this.props.photos[this.props.idx].thumbnail_height/this.props.photos[this.props.idx].thumbnail_width\n }\n return (\n\n
\n
\n \n
\n \n
{this.props.photos[this.props.idx].image_path}
\n\n \n\n
\n \n
\n\n
\n )\n } \n else {\n return
\n } \n }\n}" }, { "path": "src/components/people.js", "content": "import React, { Component } from 'react';\nimport { connect } from \"react-redux\";\nimport { Image, Header, Message, Dropdown, Divider, Card, \n Container, Segment, Button, Icon, Popup, Loader, \n Dimmer, Grid, Reveal, Statistic, Label, Table,\n Modal } from 'semantic-ui-react';\nimport { fetchPeople, \n addPerson ,\n addPersonAndSetLabelToFace} from '../actions/peopleActions';\nimport { fetchFaces, \n fetchLabeledFaces,\n fetchInferredFaces,\n deleteFaceAndFetchNext, \n labelFacePerson ,\n fetchFaceToLabel,\n loadFaceToLabel,\n labelFacePersonAndFetchNext} from '../actions/facesActions';\n\nimport SocialGraph from './socialGraph'\nimport {Server, serverAddress} from '../api_client/apiClient'\n\nexport class PeopleCardGroup extends Component {\n componentWillMount() {\n this.props.dispatch(fetchPeople())\n }\n\n render() {\n var cards = this.props.people.map(function(person,idx){\n return (\n \n )\n })\n return (\n \n {cards}\n \n )\n }\n}\n\nexport class PersonCard extends Component {\n render() {\n return (\n \n \n \n \n {this.props.name}\n \n \n {this.props.photo_count} Faces\n \n \n \n
\n
\n \n \n )\n }\n}\n\nPeopleCardGroup = connect((store)=>{\n return {\n people: store.people.people,\n peopleFetching: store.people.fetching,\n peopleFetched: store.people.fetched,\n }\n})(PeopleCardGroup)\n\nexport default PeopleCardGroup" }, { "path": "src/components/socialGraph.js", "content": "import React, {Component} from 'react'\nimport {Segment, Header, Loader} from 'semantic-ui-react'\nimport {XYPlot, XAxis, YAxis, HorizontalGridLines, \n\t\t\t\tMarkSeries, VerticalGridLines, Crosshair} from 'react-vis';\nimport Dimensions from 'react-dimensions'\nimport { connect } from \"react-redux\";\nimport { Graph } from 'react-d3-graph';\nimport { fetchSocialGraph } from '../actions/peopleActions'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\n\n\n\nexport class SocialGraph extends Component {\n\tcomponentWillMount() {\n\t\tif (!this.props.fetched){\n\t\t\tthis.props.dispatch(fetchSocialGraph())\n\t\t}\n\t}\n\n\trender(){\n\t\tvar width = this.props.containerWidth\n\n\t\tconsole.log('social graph width',width)\n\t\tvar data = this.props.socialGraph\n\t\tvar myConfig = {\n\t\t\tautomaticRearrangeAfterDropNode: false,\n\t\t\tstaticGraph:true,\n\t\t nodeHighlightBehavior: true,\n\t\t maxZoom: 4,\n\t\t minZoom: 0.1,\n\t\t node: {\n\t\t \tfontSize: 10,\n\t\t \tsize: 500,\n\t\t color: 'lightblue',\n\t\t highlightFontSize: 15,\n\t\t highlightStrokeColor: 'orange'\n\t\t },\n\t\t link: {\n\t\t highlightColor: 'orange',\n\t\t color: '#12939A',\n\t\t },\n\t\t height: this.props.height,\n\t\t width: width\n\t\t}\n\n\t\tif (this.props.fetched && this.props.socialGraph.nodes.length > 0) {\n console.log(this.props.socialGraph)\n\t\t\tvar graph = \n\t\t}\n\t\telse {\n\t\t\tvar graph = Fetching Social Graph\n\t\t}\n\n\t\tconsole.log(this.props)\n\t\treturn (\n\t\t\t
\n\t\t\t\t{graph}\n\t\t\t
\n\t\t)\n\t}\n}\n\n\n\n\nSocialGraph = connect((store)=>{\n return {\n socialGraph: store.people.socialGraph,\n fetching: store.people.fetchingSocialGraph,\n fetched: store.people.fetchedSocialGraph,\n }\n})(SocialGraph)\n\nexport default Dimensions()(SocialGraph)\n" }, { "path": "src/components/statistics.js", "content": "import React, {Component} from 'react'\nimport { Statistic, Grid, Image, Icon, Header, \n\t\t\t\t Container, Divider, Button, Loader,\n\t\t\t\t Dimmer, Segment} from 'semantic-ui-react'\nimport { connect } from \"react-redux\";\n\nimport {fetchCountStats} from '../actions/utilActions'\n\n\nexport class CountStats extends Component {\n\tcomponentWillMount() {\n\t\tthis.props.dispatch(fetchCountStats())\n\t}\n\n\trender() {\n\t\tif (this.props.fetchedCountStats) {\n\t\t\tvar statsGroup = (\n\t\t\t
\n\t\t\t \n\t\t\t \n\t\t\t {this.props.countStats.num_photos}\n\t\t\t Photos\n\t\t\t \n\t\t\t \n\t\t\t {this.props.countStats.num_people}\n\t\t\t People\n\t\t\t \n\t\t\t \n\t\t\t {this.props.countStats.num_faces}\n\t\t\t Faces\n\t\t\t \n\t\t\t \n\t\t\t {this.props.countStats.num_albumauto}\n\t\t\t Events\n\t\t\t \n\t\t\t \n\t\t\t {this.props.countStats.num_albumdate}\n\t\t\t Days\n\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t)\n\t\t}\n\t\telse {\n\t\t\tvar statsGroup = (\n\t\t\t
\n\t\t\t \n\t\t\t \n\t\t\t -\n\t\t\t Photos\n\t\t\t \n\t\t\t \n\t\t\t -\n\t\t\t People\n\t\t\t \n\t\t\t \n\t\t\t -\n\t\t\t Faces\n\t\t\t \n\t\t\t \n\t\t\t -\n\t\t\t Events\n\t\t\t \n\t\t\t \n\t\t\t -\n\t\t\t Days\n\t\t\t \n\t\t\t \n\t\t\t
\n\t\t\t)\t\t}\n\t\tconsole.log('rendering')\n\t\treturn (\n
\n\t\t\t{statsGroup}\n
\n\t\t)\n\t}\n}\n\nCountStats = connect((store)=>{\n return {\n countStats: store.util.countStats,\n fetchingCountStats: store.util.fetchingCountStats,\n fetchedCountStats: store.util.fetchedCountStats,\n }\n})(CountStats)\n" }, { "path": "src/containers/login.js", "content": "import React from 'react'\nimport { connect } from 'react-redux'\nimport { Redirect } from 'react-router-dom'\nimport {LoginPage} from '../layouts/loginPage'\nimport {login} from '../actions/authActions'\nimport { fetchSiteSettings } from '../actions/utilActions'\nimport {authErrors, isAuthenticated, isRefreshTokenExpired} from '../reducers'\n\n\nconst Login = (props) => {\n if(props.isAuthenticated) {\n console.log(props)\n if (props.location.state) {\n return (\n \n )\n } else {\n return (\n \n )\n }\n } else {\n console.log(props)\n return (\n
\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => ({\n errors: authErrors(state),\n siteSettings: state.util.siteSettings,\n isAuthenticated: !isRefreshTokenExpired(state),\n})\n\nconst mapDispatchToProps = (dispatch) => ({\n onSubmit: (username, password) => {\n dispatch(login(username, password))\n },\n fetchSiteSettings: () => {\n dispatch(fetchSiteSettings()) \n }\n\n})\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Login)\n" }, { "path": "src/history.js", "content": "import createHistory from 'history/createBrowserHistory';\n\nexport default createHistory();\n" }, { "path": "src/index.css", "content": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n}\n\n" }, { "path": "src/index.js", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport 'semantic-ui-css/semantic.min.css';\nimport 'react-vis/dist/style.css'\nimport 'font-awesome/css/font-awesome.min.css';\nimport 'react-leaflet-markercluster/dist/styles.min.css'; // css\nimport { CookiesProvider } from 'react-cookie'\n\n\n\nimport App from './App';\nimport registerServiceWorker from './registerServiceWorker';\nimport configureStore from \"./store\"\nimport { Provider } from \"react-redux\"\n\nimport {LoginPage} from './layouts/loginPage'\nimport {CountryPiChart} from './components/charts/countryPiChart'\n\nimport history from './history'\nimport store from './store'\n\n// export const store = configureStore(history)\n\n\n\nReactDOM.render(\n\n \n\t\t\n \n\n, document.getElementById('root'));\n\nregisterServiceWorker();\n" }, { "path": "src/layouts/AdminPage.js", "content": "import React, {Component} from 'react';\nimport {\n Form,\n Radio,\n Label,\n Step,\n Progress,\n List,\n Grid,\n Image,\n Icon,\n Item,\n Header,\n Segment,\n Accordion,\n Container,\n Message,\n Input,\n Button,\n Loader,\n Table,\n Dropdown,\n Popup,\n Divider,\n Pagination,\n} from 'semantic-ui-react';\nimport {connect} from 'react-redux';\nimport {Link} from 'react-router-dom';\n\nimport Modal from 'react-modal';\nimport moment from 'moment';\n\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchWordCloud,\n generateEventAlbums,\n fetchAutoAlbumProcessingStatus,\n generateEventAlbumTitles,\n fetchWorkerAvailability,\n setSiteSettings,\n fetchSiteSettings,\n updateUser,\n fetchNextcloudDirectoryTree,\n fetchJobList,\n deleteJob,\n fetchUserList,\n fetchDirectoryTree,\n manageUpdateUser,\n} from '../actions/utilActions';\nimport {\n scanPhotos,\n scanNextcloudPhotos,\n fetchPhotos,\n} from '../actions/photosActions';\nimport {fetchUserSelfDetails} from '../actions/userActions';\nimport CountryPiChart from '../components/charts/countryPiChart';\nimport {CountStats} from '../components/statistics';\nimport WordCloud from '../components/charts/wordCloud';\n\nimport {AllPhotosMap, EventMap, LocationClusterMap} from '../components/maps';\nimport EventCountMonthGraph from '../components/eventCountMonthGraph';\nimport FaceClusterScatter from '../components/faceClusterGraph';\nimport SocialGraph from '../components/socialGraph';\nimport LazyLoad from 'react-lazyload';\nimport {LocationLink} from '../components/locationLink';\n\nimport Dropzone from 'react-dropzone';\nimport AvatarEditor from 'react-avatar-editor';\nimport MaterialIcon, {colorPallet} from 'material-icons-react';\nimport SortableTree from 'react-sortable-tree';\nimport FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';\n\nexport class AdminPage extends Component {\n state = {modalOpen: false, userToEdit: null};\n\n componentDidMount() {\n if (this.props.auth.access.is_admin) {\n this.props.dispatch(fetchSiteSettings());\n this.props.dispatch(fetchJobList());\n this.props.dispatch(fetchUserList());\n this.props.dispatch(fetchDirectoryTree());\n }\n }\n\n render() {\n if (!this.props.auth.access.is_admin) {\n return
Unauthorized
;\n }\n\n if (this.props.userSelfDetails.square_avatar) {\n var avatarImgSrc = this.props.userSelfDetails.square_avatar;\n } else if (this.state.avatarImgSrc) {\n var avatarImgSrc = this.state.avatarImgSrc;\n } else {\n var avatarImgSrc = '/unknown_user.jpg';\n }\n\n var buttonsDisabled = !this.props.workerAvailability;\n\n return (\n
\n
\n \n Admin Area\n
\n\n \n
Site settings
\n\n \n \n \n Allow user registration\n \n\n \n
\n \n \n \n this.props.dispatch(\n setSiteSettings({allow_registration: true}),\n )\n }\n checked={this.props.siteSettings.allow_registration}\n />\n \n \n \n this.props.dispatch(\n setSiteSettings({allow_registration: false}),\n )\n }\n checked={!this.props.siteSettings.allow_registration}\n />\n \n \n
\n \n \n \n\n \n
\n Users\n \n
\n\n \n \n \n Username\n Scan Directory\n Photo Count\n Last Login\n \n \n \n {this.props.userList.map(user => {\n return (\n \n {user.username}\n \n {\n this.setState({\n userToEdit: user,\n modalOpen: true,\n });\n }}\n />\n {user.scan_directory ? user.scan_directory : 'Not set'}\n \n {user.photo_count}\n {moment(user.date_joined).fromNow()}\n \n );\n })}\n \n
\n\n \n\n \n\n {\n this.setState({modalOpen: false});\n }}\n userToEdit={this.state.userToEdit}\n isOpen={this.state.modalOpen}\n />\n
\n );\n }\n}\n\nconst modalStyles = {\n content: {\n top: 150,\n left: 40,\n right: 40,\n height: window.innerHeight - 300,\n\n overflow: 'hidden',\n // paddingRight:0,\n // paddingBottomt:0,\n // paddingLeft:10,\n // paddingTop:10,\n padding: 0,\n backgroundColor: 'white',\n },\n overlay: {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n position: 'fixed',\n borderRadius: 0,\n border: 0,\n zIndex: 102,\n backgroundColor: 'rgba(200,200,200,0.8)',\n },\n};\n\nclass JobList extends Component {\n state = {activePage: 1, pageSize: 10};\n\n componentDidMount() {\n if (this.props.auth.access.is_admin) {\n this.props.dispatch(\n fetchJobList(this.state.activePage, this.state.pageSize),\n );\n }\n }\n\n render() {\n return (\n
\n
\n Worker Logs{' '}\n \n
\n {\n this.props.dispatch(\n fetchJobList(this.state.activePage, this.state.pageSize),\n );\n }}>\n Reload\n \n \n \n \n Status\n Job Type\n Progress\n Queued\n Started\n Duration\n Started By\n Delete\n \n \n \n {this.props.jobList.map(job => {\n let progressPerc = 0;\n if (job.result.progress) {\n progressPerc =\n (job.result.progress.current.toFixed() /\n job.result.progress.target) *\n 100;\n }\n if (job.finished && !job.failed) {\n progressPerc = 100;\n }\n const jobSuccess = job.finished && !job.failed;\n return (\n \n \n {job.finished ? (\n job.failed ? (\n \n ) : (\n \n )\n ) : job.started_at ? (\n \n ) : (\n \n )}\n \n {job.job_type_str}\n \n {job.result.progress.target !== 0 && !job.finished ? (\n 0\n ? job.result.progress.target\n : 1\n }\n active={!job.finished}\n success={jobSuccess}>\n {(\n job.result.progress.current.toFixed(2) /\n job.result.progress.target\n ).toFixed(2) * 100}\n %\n \n ) : job.finished ? (\n \n {job.result.progress.current} Item(s) processed{' '}\n \n ) : null}\n \n {moment(job.queued_at).fromNow()}\n \n {job.started_at ? moment(job.started_at).fromNow() : ''}\n \n\n \n {job.finished\n ? moment\n .duration(\n moment(job.finished_at) - moment(job.started_at),\n )\n .humanize()\n : job.started_at\n ? 'running'\n : ''}\n \n {job.started_by.username}\n \n {\n this.props.dispatch(\n deleteJob(\n job.id,\n this.state.activatePage,\n this.state.pageSize,\n ),\n );\n }}\n color=\"red\"\n size=\"tiny\">\n Remove\n \n }\n content=\"Does not actually stop the job, only removes this entry from DB. Use only in cases when you know that a job failed ungracefully, by inspecting the logs, etc.\"\n />\n \n \n );\n })}\n \n
\n ,\n icon: true,\n }}\n firstItem={{content: , icon: true}}\n lastItem={{content: , icon: true}}\n prevItem={{content: , icon: true}}\n nextItem={{content: , icon: true}}\n totalPages={Math.ceil(\n this.props.jobCount.toFixed(1) / this.state.pageSize,\n )}\n onPageChange={(e, d) => {\n console.log(d.activePage);\n this.setState({activePage: d.activePage});\n this.props.dispatch(\n fetchJobList(d.activePage, this.state.pageSize),\n );\n }}\n />\n
\n );\n }\n}\n\nclass ModalScanDirectoryEdit extends Component {\n constructor(props) {\n super(props);\n this.state = {newScanDirectory: '', treeData: []};\n this.nodeClicked = this.nodeClicked.bind(this);\n this.inputRef = React.createRef();\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.treeData.length === 0) {\n return {...prevState, treeData: nextProps.directoryTree};\n } else {\n return prevState;\n }\n }\n\n nodeClicked(event, rowInfo) {\n console.log(rowInfo);\n this.inputRef.current.inputRef.value = rowInfo.node.absolute_path;\n this.setState({newScanDirectory: rowInfo.node.absolute_path});\n }\n\n render() {\n console.log(this.inputRef);\n return (\n {\n this.props.onRequestClose();\n this.setState({newScanDirectory: ''});\n }}\n style={modalStyles}>\n
\n
\n Set the scan directory for user \"\n {this.props.userToEdit ? this.props.userToEdit.username : '...'}\"\n \n When the user \"\n {this.props.userToEdit ? this.props.userToEdit.username : '...'}\"\n clicks on the 'scan photos' button, photos in the directory that\n you specify here will be imported under the user's account.\n \n
\n
\n \n \n \n
\n
User's current directory
\n
\n
\n \n \n {\n const newUserData = {\n ...this.props.userToEdit,\n scan_directory: this.state.newScanDirectory,\n };\n console.log(newUserData);\n this.props.dispatch(manageUpdateUser(newUserData));\n this.props.onRequestClose();\n }}>\n Update\n \n \n
\n \n \n \n \n
\n
Choose a directory from below
\n
\n \n false}\n canDrop={() => false}\n treeData={this.state.treeData}\n onChange={treeData => this.setState({treeData})}\n theme={FileExplorerTheme}\n generateNodeProps={rowInfo => {\n let nodeProps = {\n onClick: event => this.nodeClicked(event, rowInfo),\n };\n if (this.state.selectedNodeId === rowInfo.node.id) {\n nodeProps.className = 'selected-node';\n }\n return nodeProps;\n }}\n />\n
\n \n \n \n \n );\n }\n}\n\nJobList = connect(store => {\n return {\n auth: store.auth,\n jobList: store.util.jobList,\n jobCount: store.util.jobCount,\n fetchingJobList: store.util.fetchingJobList,\n fetchedJobList: store.util.fetchedJobList,\n };\n})(JobList);\n\nModalScanDirectoryEdit = connect(store => {\n return {\n auth: store.auth,\n\n directoryTree: store.util.directoryTree,\n fetchingDirectoryTree: store.util.fetchingDirectoryTree,\n fetchedDirectoryTree: store.util.fetchedDirectoryTree,\n\n userList: store.util.userList,\n fetchingUSerList: store.util.fetchingUserList,\n fetchedUserList: store.util.fetchedUserList,\n };\n})(ModalScanDirectoryEdit);\n\nAdminPage = connect(store => {\n return {\n auth: store.auth,\n util: store.util,\n gridType: store.ui.gridType,\n siteSettings: store.util.siteSettings,\n statusPhotoScan: store.util.statusPhotoScan,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n generatingAutoAlbums: store.util.generatingAutoAlbums,\n scanningPhotos: store.photos.scanningPhotos,\n fetchedCountStats: store.util.fetchedCountStats,\n workerAvailability: store.util.workerAvailability,\n fetchedNextcloudDirectoryTree: store.util.fetchedNextcloudDirectoryTree,\n userSelfDetails: store.user.userSelfDetails,\n fetchingJobList: store.util.fetchingJobList,\n fetchedJobList: store.util.fetchedJobList,\n userList: store.util.userList,\n fetchingUserList: store.util.fetchingUserList,\n fetchedUserList: store.util.fetchedUserList,\n };\n})(AdminPage);\n" }, { "path": "src/layouts/Bench.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchAutoAlbumsList} from '../actions/albumsActions'\nimport {AlbumAutoCard, AlbumAutoGallery} from '../components/album'\nimport {Container, Image, Icon, Header, Button, Card, Label, Popup} from 'semantic-ui-react'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\n\n\n\nexport class SecuredImage extends Component {\n state ={\n imgData:null\n }\n\n componentWillMount() {\n Server.get(this.props.src)\n .then((resp)=>{\n console.log(resp)\n this.setState({imgData:resp.data.data})\n })\n .catch((err)=>{\n console.log('img load error')\n console.log(err)\n })\n }\n render() {\n const {imgData} = this.state\n const imgProps = {...this.props, src:'data:image/jpeg;base64,'+imgData}\n \n if (imgData) {\n return (\n \n ) \n }\n return (\n
hello
\n )\n }\n}\n" }, { "path": "src/layouts/DataVisualization.js", "content": "import React, { Component } from \"react\";\nimport {\n Popup,\n Segment,\n Grid,\n Image,\n Icon,\n Header,\n Container,\n Divider,\n Button,\n Loader,\n Menu\n} from \"semantic-ui-react\";\nimport { connect } from \"react-redux\";\n\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchWordCloud,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\nimport { scanPhotos, fetchPhotos } from \"../actions/photosActions\";\n\nimport CountryPiChart from \"../components/charts/countryPiChart\";\nimport { CountStats } from \"../components/statistics\";\nimport WordCloud from \"../components/charts/wordCloud\";\nimport { LocationLink } from \"../components/locationLink\";\n\nimport { AllPhotosMap, EventMap, LocationClusterMap } from \"../components/maps\";\nimport EventCountMonthGraph from \"../components/eventCountMonthGraph\";\nimport LocationDurationStackedBar from \"../components/locationDurationStackedBar\";\n\nimport FaceClusterScatter from \"../components/faceClusterGraph\";\nimport SocialGraph from \"../components/socialGraph\";\nimport LazyLoad from \"react-lazyload\";\n\nexport class LocationTree extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nexport class PhotoMap extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nexport class WordClouds extends Component {\n componentWillMount() {\n this.props.dispatch(fetchWordCloud());\n }\n\n render() {\n return (\n
\n
\n \n
\n
\n );\n }\n}\n\nWordClouds = connect(store => {\n return {\n statusPhotoScan: store.util.statusPhotoScan,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n scanningPhotos: store.photos.scanningPhotos,\n fetchedCountStats: store.util.fetchedCountStats\n };\n})(WordClouds);\n\nexport class Timeline extends Component {\n render() {\n return (\n
\n
\n \n
\n
\n );\n }\n}\n\nexport class Graph extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nexport class FaceScatter extends Component {\n render() {\n return (\n
\n \n
\n );\n }\n}\n" }, { "path": "src/layouts/FaceDashboardV3.js", "content": "import React, { Component } from \"react\";\nimport {\n Checkbox,\n Popup,\n Input,\n Item,\n Menu,\n Image,\n Icon,\n Header,\n Container,\n Divider,\n Button,\n Label,\n Loader,\n Sticky,\n Accordion,\n} from \"semantic-ui-react\";\n\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nimport { connect } from \"react-redux\";\nimport {\n deleteFaces,\n setFacesPersonLabel,\n loadFaceToLabel,\n trainFaces,\n clusterFaces,\n fetchInferredFacesList,\n fetchLabeledFacesList,\n fetchFacesList,\n} from \"../actions/facesActions\";\nimport LazyLoad from \"react-lazyload\";\nimport _ from \"lodash\";\nimport {\n Grid,\n List,\n WindowScroller,\n AutoSizer,\n CellMeasurer,\n} from \"react-virtualized\";\nimport {\n calculateFaceGridCellSize,\n calculateFaceGridCells,\n} from \"../util/gridUtils\";\nimport { ScrollSpeed, SCROLL_DEBOUNCE_DURATION } from \"../util/scrollUtils\";\nimport debounce from \"lodash/debounce\";\nimport { fetchPeople, addPerson } from \"../actions/peopleActions\";\nimport { serverAddress } from \"../api_client/apiClient\";\nimport Modal from \"react-modal\";\nimport moment from \"moment\";\n// \nvar topMenuHeight = 45; // don't change this\nvar leftMenuWidth = 85; // don't change this\nvar SIDEBAR_WIDTH = 85;\n\nconst SPEED_THRESHOLD = 500;\n\nfunction fuzzy_match(str, pattern) {\n if (pattern.split(\"\").length > 0) {\n pattern = pattern\n .split(\"\")\n .map((a) => _.escapeRegExp(a))\n .reduce(function (a, b) {\n return a + \".*\" + b;\n });\n return new RegExp(pattern).test(str);\n } else {\n return false;\n }\n}\n\nconst modalStyles = {\n content: {\n top: 150,\n left: 40,\n right: 40,\n height: window.innerHeight - 300,\n\n overflow: \"hidden\",\n padding: 0,\n backgroundColor: \"white\",\n },\n overlay: {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n position: \"fixed\",\n borderRadius: 0,\n border: 0,\n zIndex: 102,\n backgroundColor: \"rgba(200,200,200,0.8)\",\n },\n};\n\nclass ModalPersonEdit extends Component {\n state = { newPersonName: \"\" };\n render() {\n if (this.state.newPersonName.length > 0) {\n var filteredPeopleList = this.props.people.filter((el) =>\n fuzzy_match(\n el.text.toLowerCase(),\n this.state.newPersonName.toLowerCase()\n )\n );\n } else {\n var filteredPeopleList = this.props.people;\n }\n\n const allFaces = _.concat(\n this.props.inferredFacesList,\n this.props.labeledFacesList\n );\n\n var selectedImageIDs = this.props.selectedFaces.map((faceID) => {\n const res = allFaces.filter((face) => face.id === faceID)[0].image;\n const splitBySlash = res.split(\"/\");\n console.log(splitBySlash[splitBySlash.length - 1]);\n const faceImageID = splitBySlash[splitBySlash.length - 1];\n return faceImageID;\n });\n return (\n {\n this.props.dispatch(fetchPeople());\n }}\n isOpen={this.props.isOpen}\n onRequestClose={() => {\n this.props.onRequestClose();\n this.setState({ newPersonName: \"\" });\n }}\n style={modalStyles}\n >\n
\n
\n Label faces\n \n Label selected {this.props.selectedFaces.length} face(s) as...\n \n
\n
\n \n \n \n {selectedImageIDs.map((image) => (\n \n ))}\n \n \n \n \n
\n
New person
\n el.text.toLowerCase().trim())\n .includes(this.state.newPersonName.toLowerCase().trim())}\n trigger={\n el.text.toLowerCase().trim())\n .includes(this.state.newPersonName.toLowerCase().trim())}\n onChange={(e, v) => {\n this.setState({ newPersonName: v.value });\n }}\n placeholder=\"Person name\"\n action\n >\n \n {\n this.props.dispatch(\n setFacesPersonLabel(\n this.props.selectedFaces,\n this.state.newPersonName\n )\n );\n this.props.onRequestClose();\n this.setState({ newPersonName: \"\" });\n }}\n disabled={this.props.people\n .map((el) => el.text.toLowerCase().trim())\n .includes(this.state.newPersonName.toLowerCase().trim())}\n type=\"submit\"\n >\n Add Person\n \n \n }\n />\n
\n \n {filteredPeopleList.length > 0 &&\n filteredPeopleList.map((item) => {\n return (\n \n {\n this.props.dispatch(\n setFacesPersonLabel(this.props.selectedFaces, item.text)\n );\n this.props.onRequestClose();\n // console.log('trying to add photos: ',this.props.selectedFaces)\n // console.log('to user album id: ',item.id)\n }}\n >\n \n \n {item.text}\n \n {item.face_count} Photo(s)\n \n \n \n \n );\n })}\n \n \n );\n }\n}\n\nexport class FaceDashboard extends Component {\n state = {\n lastChecked: null,\n activeItem: \"labeled\",\n entrySquareSize: 200,\n numEntrySquaresPerRow: 10,\n selectMode: false,\n selectedFaces: [],\n modalPersonEditOpen: false,\n topRowPersonName: null,\n };\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name });\n\n scrollSpeedHandler = new ScrollSpeed();\n\n handleScroll = ({ scrollTop }) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(\n this.scrollSpeedHandler.getScrollSpeed(scrollTop)\n );\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop: scrollTop,\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n };\n\n handleScrollEnd = debounce(() => {\n const { isScrollingFast } = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false,\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n componentDidMount() {\n this.props.dispatch(fetchInferredFacesList());\n this.props.dispatch(fetchLabeledFacesList());\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n var t0 = performance.now();\n\n var inferredGroupedByPerson = _.groupBy(\n nextProps.inferredFacesList,\n (el) => el.person_name\n );\n var inferredGroupedByPersonList = _.sortBy(\n _.toPairsIn(inferredGroupedByPerson),\n (el) => el[0]\n ).map((el) => {\n return {\n person_name: el[0],\n faces: _.reverse(\n _.sortBy(el[1], (el2) => el2.person_label_probability)\n ),\n };\n });\n\n var labeledGroupedByPerson = _.groupBy(\n nextProps.labeledFacesList,\n (el) => el.person_name\n );\n var labeledGroupedByPersonList = _.sortBy(\n _.toPairsIn(labeledGroupedByPerson),\n (el) => el[0]\n ).map((el) => {\n return { person_name: el[0], faces: el[1] };\n });\n var t1 = performance.now();\n\n var idx2hash = [];\n\n const inferredCellContents = calculateFaceGridCells(\n inferredGroupedByPersonList,\n prevState.numEntrySquaresPerRow\n ).cellContents;\n const labeledCellContents = calculateFaceGridCells(\n labeledGroupedByPersonList,\n prevState.numEntrySquaresPerRow\n ).cellContents;\n const nextState = {\n ...prevState,\n inferredCellContents,\n labeledCellContents,\n inferredGroupedByPersonList,\n labeledGroupedByPersonList,\n };\n return nextState;\n }\n\n handleResize() {\n if (this.props.showSidebar) {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10;\n } else {\n var columnWidth = window.innerWidth - 5 - 5 - 10;\n }\n\n const {\n entrySquareSize,\n numEntrySquaresPerRow,\n } = calculateFaceGridCellSize(columnWidth);\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow,\n });\n\n if (this.state.inferredGroupedByPersonList) {\n const inferredCellContents = calculateFaceGridCells(\n this.state.inferredGroupedByPersonList,\n numEntrySquaresPerRow\n ).cellContents;\n this.setState({\n inferredCellContents,\n });\n }\n if (this.state.labeledGroupedByPersonList) {\n const labeledCellContents = calculateFaceGridCells(\n this.state.labeledGroupedByPersonList,\n numEntrySquaresPerRow\n ).cellContents;\n this.setState({\n labeledCellContents,\n });\n }\n }\n\n handleClick(e, cell) {\n if (!this.state.lastChecked) {\n this.state.lastChecked = cell;\n this.onFaceSelect(cell.id);\n return;\n }\n if (e.shiftKey) {\n var currentCellsInRowFormat =\n this.state.activeItem === \"labeled\"\n ? this.state.labeledCellContents\n : this.state.inferredCellContents;\n\n var allFacesInCells = [];\n for (var i = 0; i < currentCellsInRowFormat.length; i++) {\n for (var j = 0; j < this.state.numEntrySquaresPerRow; j++) {\n allFacesInCells.push(currentCellsInRowFormat[i][j]);\n }\n }\n var start = allFacesInCells.indexOf(cell);\n var end = allFacesInCells.indexOf(this.state.lastChecked);\n console.log(start);\n console.log(end);\n\n var facesToSelect = allFacesInCells.slice(\n Math.min(start, end),\n Math.max(start, end) + 1\n );\n facesToSelect.forEach((face) => this.onFaceSelect(face.id));\n return;\n }\n this.onFaceSelect(cell.id);\n this.state.lastChecked = cell;\n }\n\n onFaceSelect(faceID) {\n var selectedFaces = this.state.selectedFaces;\n if (selectedFaces.includes(faceID)) {\n selectedFaces = selectedFaces.filter((item) => item !== faceID);\n } else {\n selectedFaces.push(faceID);\n }\n this.setState({ selectedFaces: selectedFaces });\n console.log(selectedFaces.length)\n console.log(selectedFaces > 0)\n this.setState({ selectMode: selectedFaces.length > 0 });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n if (this.state.activeItem === \"labeled\") {\n var cell = this.state.labeledCellContents[rowIndex][columnIndex];\n } else {\n var cell = this.state.inferredCellContents[rowIndex][columnIndex];\n }\n\n if (cell) {\n if (!cell.image) {\n return (\n \n
\n {cell.person_name}\n {cell.faces.length} Faces\n
\n \n \n );\n } else {\n const labelProbability = cell.person_label_probability;\n const labelProbabilityColor =\n labelProbability > 0.9\n ? \"green\"\n : labelProbability > 0.8\n ? \"yellow\"\n : labelProbability > 0.7\n ? \"orange\"\n : \"red\";\n\n var labelProbabilityIcon = (\n
\n \n }\n on=\"focus\"\n flowing\n inverted\n hideOnScroll\n position=\"bottom center\"\n content={`Confidence: ${(labelProbability * 100).toFixed(1)}%`}\n />\n
\n );\n var showPhotoIcon = (\n
\n \n }\n on=\"focus\"\n flowing\n hideOnScroll\n inverted\n position=\"bottom center\"\n content={\n \n }\n />\n
\n );\n\n if (this.state.isScrollingFast) {\n return (\n
\n \n
\n );\n } else {\n // TODO: janky shit going on in the next line!\n var faceImageSrc =\n serverAddress +\n \"/media/faces/\" +\n _.reverse(cell.image.split(\"/\"))[0];\n if (this.state.selectMode) {\n const isSelected = this.state.selectedFaces.includes(cell.id);\n return (\n
\n \n {\n this.handleClick(e, cell);\n }}\n src={faceImageSrc}\n height={this.state.entrySquareSize - 30}\n width={this.state.entrySquareSize - 30}\n />\n {this.state.activeItem === \"inferred\" && labelProbabilityIcon}\n {showPhotoIcon}\n
\n \n );\n } else {\n return (\n
\n {\n this.handleClick(e, cell);\n }}\n src={faceImageSrc}\n height={this.state.entrySquareSize - 10}\n width={this.state.entrySquareSize - 10}\n />\n {this.state.activeItem === \"inferred\" && labelProbabilityIcon}\n {showPhotoIcon}\n
\n );\n }\n }\n }\n } else {\n return
;\n }\n };\n\n render() {\n const { activeItem } = this.state;\n return (\n
\n
\n \n \n {\"Labeled \"}{\" \"}\n \n \n \n {\"Inferred \"}{\" \"}\n \n \n \n
\n \n \n
\n\n \n {\n this.setState({ selectMode: !this.state.selectMode });\n }}\n />\n\n \n {\n if (this.state.selectedFaces.length > 0) {\n this.setState({ modalPersonEditOpen: true });\n }\n }}\n icon=\"plus\"\n />\n }\n content=\"Add to an existing album or create a new album\"\n />\n {\n this.props.dispatch(deleteFaces(this.state.selectedFaces));\n this.setState({ selectedFaces: [] });\n }}\n icon=\"trash\"\n />\n }\n content=\"delete faces\"\n />\n\n {\n this.props.dispatch(trainFaces());\n }}\n icon=\"lightning\"\n />\n }\n content=\"Train a classifier and automatically label faces\"\n />\n \n
\n\n
\n \n {({ width }) => (\n {\n if (activeItem === \"labeled\") {\n this.setState({\n topRowPersonName: this.state.labeledCellContents[\n rowStartIndex\n ][0].person_name,\n });\n } else {\n this.setState({\n topRowPersonName: this.state.inferredCellContents[\n rowStartIndex\n ][0].person_name,\n });\n }\n // console.log(this.state.labeledCellContents[rowStartIndex][0].person_name)\n }}\n cellRenderer={this.cellRenderer}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height - topMenuHeight - 40 - 40}\n rowHeight={this.state.entrySquareSize}\n rowCount={\n activeItem === \"labeled\"\n ? this.state.labeledCellContents.length\n : this.state.inferredCellContents.length\n }\n width={width}\n />\n )}\n \n
\n\n {\n this.setState({\n modalPersonEditOpen: false,\n selectedFaces: [],\n });\n }}\n selectedFaces={this.state.selectedFaces}\n />\n \n );\n }\n}\n\nFaceDashboard = connect((store) => {\n return {\n workerAvailability: store.util.workerAvailability,\n workerRunningJob: store.util.workerRunningJob,\n\n showSidebar: store.ui.showSidebar,\n\n facesList: store.faces.facesList,\n inferredFacesList: store.faces.inferredFacesList,\n labeledFacesList: store.faces.labeledFacesList,\n\n people: store.people.people,\n\n facesVis: store.faces.facesVis,\n training: store.faces.training,\n trained: store.faces.trained,\n fetchingLabeledFacesList: store.faces.fetchingLabeledFacesList,\n fetchedLabeledFacesList: store.faces.fetchedLabeledFacesList,\n fetchingInferredFacesList: store.faces.fetchingInferredFacesList,\n fetchedInferredFacesList: store.faces.fetchedInferredFacesList,\n };\n})(FaceDashboard);\n\nModalPersonEdit = connect((store) => {\n return {\n people: store.people.people,\n fetchingPeople: store.people.fetchingPeople,\n fetchedPeople: store.people.fetchedPeople,\n\n inferredFacesList: store.faces.inferredFacesList,\n labeledFacesList: store.faces.labeledFacesList,\n\n fetchingLabeledFacesList: store.faces.fetchingLabeledFacesList,\n fetchedLabeledFacesList: store.faces.fetchedLabeledFacesList,\n fetchingInferredFacesList: store.faces.fetchingInferredFacesList,\n fetchedInferredFacesList: store.faces.fetchedInferredFacesList,\n };\n})(ModalPersonEdit);\n" }, { "path": "src/layouts/FavoritePhotos.js", "content": "\nimport React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {Container, Icon, Divider, Header, Image, Button, Card, Loader} from 'semantic-ui-react'\nimport { fetchPeople, fetchEgoGraph } from '../actions/peopleActions';\nimport { fetchFavoritePhotos, fetchPhotoDetail, fetchNoTimestampPhotoList} from '../actions/photosActions';\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport { Grid, List, WindowScroller,AutoSizer } from 'react-virtualized';\nimport {EgoGraph} from '../components/egoGraph'\nimport { push } from 'react-router-redux'\nimport {LightBox} from '../components/lightBox'\nimport moment from 'moment'\nimport _ from 'lodash'\nimport debounce from 'lodash/debounce'\n\n\nimport {calculateGridCells, calculateGridCellSize} from '../util/gridUtils'\nimport {ScrollSpeed, SPEED_THRESHOLD, SCROLL_DEBOUNCE_DURATION} from '../util/scrollUtils'\n\nimport {PhotoListView} from './ReusablePhotoListView'\n\n\nvar topMenuHeight = 55 // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\nvar DAY_HEADER_HEIGHT = 70\nvar leftMenuWidth = 85 // don't change this\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class FavoritePhotos extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n }\n\n componentDidMount() {\n this.props.dispatch(fetchFavoritePhotos())\n }\n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n const photos = nextProps.favoritePhotos\n if (prevState.idx2hash.length !== photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var t1 = performance.now();\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n }\n } else {\n return null\n }\n }\n\n\n\n render() {\n const {favoritePhotos,fetchingFavoritePhotos,fetchedFavoritePhotos} = this.props\n return (\n \n ) \n }\n}\n\n/*\nexport class AlbumPersonGallery extends Component {\n\n constructor() {\n super();\n this.listRef = React.createRef()\n this.handleResize = this.handleResize.bind(this)\n this.cellRenderer = this.cellRenderer.bind(this)\n this.onPhotoClick = this.onPhotoClick.bind(this)\n this.state = {\n photosGroupedByDate: [],\n cellContents: [[]],\n hash2row: {},\n idx2hash: [],\n lightboxImageIndex: 1,\n lightboxShow:false,\n lightboxSidebarShow:false,\n scrollToIndex: undefined,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200,\n numEntrySquaresPerRow:3,\n currTopRenderedRowIdx:0,\n scrollTop:0,\n gridHeight: window.innerHeight- topMenuHeight - 60,\n showGraph:false,\n }\n }\n\n\n scrollSpeedHandler = new ScrollSpeed()\n\n handleScroll = ({scrollTop}) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(this.scrollSpeedHandler.getScrollSpeed(scrollTop));\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop:scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n }\n\n handleScrollEnd = debounce(() => {\n const {isScrollingFast} = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false,\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n\n\n\n componentDidMount() {\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n if (this.props.people.length == 0){\n this.props.dispatch(fetchPeopleAlbums(this.props.match.params.albumID))\n }\n this.props.dispatch(fetchEgoGraph(this.props.match.params.albumID))\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize.bind(this))\n }\n\n\n handleResize() {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10\n const {entrySquareSize,numEntrySquaresPerRow} = calculateGridCellSize(columnWidth)\n var {cellContents,hash2row} = calculateGridCells(this.state.photosGroupedByDate,numEntrySquaresPerRow)\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow,\n cellContents: cellContents,\n hash2row: hash2row\n })\n if (this.listRef.current) {\n this.listRef.current.recomputeGridSize()\n }\n }\n\n onPhotoClick(hash) {\n this.setState({lightboxImageIndex:this.state.idx2hash.indexOf(hash),lightboxShow:true})\n }\n\n \n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPeople.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPeople[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length != photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var {cellContents,hash2row} = calculateGridCells(groupedByDateList,prevState.numEntrySquaresPerRow)\n console.log(cellContents)\n var t1 = performance.now();\n console.log(t1-t0)\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n cellContents: cellContents,\n hash2row:hash2row\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n\n\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n if (this.state.cellContents[rowIndex][columnIndex]) { // non-empty cell\n const cell = this.state.cellContents[rowIndex][columnIndex]\n if (cell.date) { // header cell has 'date' attribute\n return ( \n
\n
\n
\n \n \n { cell.date=='No Timestamp' ? \"No Timestamp\" : moment(cell.date).format(\"MMM Do YYYY, dddd\")}\n \n {cell.photos.length} Photos\n \n \n
\n
\n
\n ) \n \n // if (!this.state.isScrollingFast){\n // } else {\n // return (\n //
\n //
\n // ) \n // } \n \n } else { // photo cell doesn't have 'date' attribute\n if (!this.state.isScrollingFast) {\n return (\n
\n {\n this.onPhotoClick(cell.image_hash)\n }}\n height={this.state.entrySquareSize} \n width={this.state.entrySquareSize} \n src={serverAddress+'/media/square_thumbnails/'+cell.image_hash+'.jpg'}/>\n
\n )\n } else {\n return (\n
\n
\n )\n }\n\n }\n\n } else { // empty cell\n return (\n
\n
\n )\n }\n }\n\n\n \n getPhotoDetails(image_hash) {\n if (!this.props.photoDetails.hasOwnProperty(image_hash)) {\n this.props.dispatch(fetchPhotoDetail(image_hash))\n }\n }\n\n render() {\n if (this.props.albumsPeople.hasOwnProperty(this.props.match.params.albumID)) {\n var totalListHeight = this.state.cellContents.map((row,index)=>{\n if (row[0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }).reduce((a,b)=>(a+b),0)\n\t return (\n\t
\n\n
\n\n
\n\n\n\n\t \t
\n\n\n
\n \n \n {this.props.albumsPeople[this.props.match.params.albumID].name + \" \"}\n
\n\n\n {this.state.showGraph && }\n\n\n\t \t
\n\n\n \n {({width}) => (\n {\n var date = this.state.cellContents[rowStartIndex][0].date\n if (date) {\n if (date=='No Timestamp') {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:date,\n fromNow:date\n })\n } else {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:moment(date).format(\"MMMM Do YYYY\"),\n fromNow:moment(date).fromNow()\n })\n }\n }\n }}\n overscanRowCount={5}\n style={{outline:'none'}}\n cellRenderer={this.cellRenderer}\n onScroll={this.handleScroll}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height- topMenuHeight - 60}\n estimatedRowSize={totalListHeight/this.state.cellContents.length.toFixed(1)}\n rowHeight={({index})=> {\n if (this.state.cellContents[index][0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }}\n rowCount={this.state.cellContents.length}\n width={width}\n />\n )}\n \n\n { this.state.cellContents[this.state.currTopRenderedRowIdx][0] && (\n
\n
\n {this.state.date}
\n
\n
\n {this.state.fromNow}\n
\n
\n )}\n\n\n { this.state.lightboxShow &&\n this.setState({ lightboxShow: false })}\n onImageLoad={()=>{\n this.getPhotoDetails(this.state.idx2hash[this.state.lightboxImageIndex])\n }}\n onMovePrevRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length - 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}\n onMoveNextRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length + 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}/>\n }\n\n\t\t\t\t
\n\t )\n }\n else {\n \treturn (\n \t\t
\n \t)\n }\n }\n}\n*/\n\nFavoritePhotos = connect((store)=>{\n return {\n favoritePhotos: store.photos.favoritePhotos,\n fetchingFavoritePhotos: store.photos.fetchingFavoritePhotos,\n fetchedFavoritePhotos: store.photos.fetchedFavoritePhotos,\n\n albumsPeople: store.albums.albumsPeople,\n fetchingAlbumsPeople: store.albums.fetchingAlbumsPeople,\n fetchedAlbumsPeople: store.albums.fetchedAlbumsPeople,\n people: store.people.people,\n fetchedPeople: store.people.fetched,\n fetchingPeople: store.people.fetching,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n }\n})(FavoritePhotos)\n" }, { "path": "src/layouts/HiddenPhotos.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {Container, Icon, Divider, Header, Image, Button, Card, Loader} from 'semantic-ui-react'\nimport { fetchPeople, fetchEgoGraph } from '../actions/peopleActions';\nimport { fetchHiddenPhotos, fetchFavoritePhotos, fetchPhotoDetail, fetchNoTimestampPhotoList} from '../actions/photosActions';\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport { Grid, List, WindowScroller,AutoSizer } from 'react-virtualized';\nimport {EgoGraph} from '../components/egoGraph'\nimport { push } from 'react-router-redux'\nimport {LightBox} from '../components/lightBox'\nimport moment from 'moment'\nimport _ from 'lodash'\nimport debounce from 'lodash/debounce'\n\n\nimport {calculateGridCells, calculateGridCellSize} from '../util/gridUtils'\nimport {ScrollSpeed, SPEED_THRESHOLD, SCROLL_DEBOUNCE_DURATION} from '../util/scrollUtils'\n\nimport {PhotoListView} from './ReusablePhotoListView'\n\n\nvar topMenuHeight = 55 // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\nvar DAY_HEADER_HEIGHT = 70\nvar leftMenuWidth = 85 // don't change this\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class HiddenPhotos extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n }\n\n componentDidMount() {\n this.props.dispatch(fetchHiddenPhotos())\n }\n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n const photos = nextProps.hiddenPhotos\n if (prevState.idx2hash.length !== photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var t1 = performance.now();\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n }\n } else {\n return null\n }\n }\n\n\n\n render() {\n const {hiddenPhotos,fetchingHiddenPhotos,fetchedHiddenPhotos} = this.props\n return (\n \n ) \n }\n}\n\n/*\nexport class AlbumPersonGallery extends Component {\n\n constructor() {\n super();\n this.listRef = React.createRef()\n this.handleResize = this.handleResize.bind(this)\n this.cellRenderer = this.cellRenderer.bind(this)\n this.onPhotoClick = this.onPhotoClick.bind(this)\n this.state = {\n photosGroupedByDate: [],\n cellContents: [[]],\n hash2row: {},\n idx2hash: [],\n lightboxImageIndex: 1,\n lightboxShow:false,\n lightboxSidebarShow:false,\n scrollToIndex: undefined,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200,\n numEntrySquaresPerRow:3,\n currTopRenderedRowIdx:0,\n scrollTop:0,\n gridHeight: window.innerHeight- topMenuHeight - 60,\n showGraph:false,\n }\n }\n\n\n scrollSpeedHandler = new ScrollSpeed()\n\n handleScroll = ({scrollTop}) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(this.scrollSpeedHandler.getScrollSpeed(scrollTop));\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop:scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n }\n\n handleScrollEnd = debounce(() => {\n const {isScrollingFast} = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false,\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n\n\n\n componentDidMount() {\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n if (this.props.people.length == 0){\n this.props.dispatch(fetchPeopleAlbums(this.props.match.params.albumID))\n }\n this.props.dispatch(fetchEgoGraph(this.props.match.params.albumID))\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize.bind(this))\n }\n\n\n handleResize() {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10\n const {entrySquareSize,numEntrySquaresPerRow} = calculateGridCellSize(columnWidth)\n var {cellContents,hash2row} = calculateGridCells(this.state.photosGroupedByDate,numEntrySquaresPerRow)\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow,\n cellContents: cellContents,\n hash2row: hash2row\n })\n if (this.listRef.current) {\n this.listRef.current.recomputeGridSize()\n }\n }\n\n onPhotoClick(hash) {\n this.setState({lightboxImageIndex:this.state.idx2hash.indexOf(hash),lightboxShow:true})\n }\n\n \n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPeople.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPeople[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length != photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var {cellContents,hash2row} = calculateGridCells(groupedByDateList,prevState.numEntrySquaresPerRow)\n console.log(cellContents)\n var t1 = performance.now();\n console.log(t1-t0)\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n cellContents: cellContents,\n hash2row:hash2row\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n\n\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n if (this.state.cellContents[rowIndex][columnIndex]) { // non-empty cell\n const cell = this.state.cellContents[rowIndex][columnIndex]\n if (cell.date) { // header cell has 'date' attribute\n return ( \n
\n
\n
\n \n \n { cell.date=='No Timestamp' ? \"No Timestamp\" : moment(cell.date).format(\"MMM Do YYYY, dddd\")}\n \n {cell.photos.length} Photos\n \n \n
\n
\n
\n ) \n \n // if (!this.state.isScrollingFast){\n // } else {\n // return (\n //
\n //
\n // ) \n // } \n \n } else { // photo cell doesn't have 'date' attribute\n if (!this.state.isScrollingFast) {\n return (\n
\n {\n this.onPhotoClick(cell.image_hash)\n }}\n height={this.state.entrySquareSize} \n width={this.state.entrySquareSize} \n src={serverAddress+'/media/square_thumbnails/'+cell.image_hash+'.jpg'}/>\n
\n )\n } else {\n return (\n
\n
\n )\n }\n\n }\n\n } else { // empty cell\n return (\n
\n
\n )\n }\n }\n\n\n \n getPhotoDetails(image_hash) {\n if (!this.props.photoDetails.hasOwnProperty(image_hash)) {\n this.props.dispatch(fetchPhotoDetail(image_hash))\n }\n }\n\n render() {\n if (this.props.albumsPeople.hasOwnProperty(this.props.match.params.albumID)) {\n var totalListHeight = this.state.cellContents.map((row,index)=>{\n if (row[0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }).reduce((a,b)=>(a+b),0)\n\t return (\n\t
\n\n
\n\n
\n\n\n\n\t \t
\n\n\n
\n \n \n {this.props.albumsPeople[this.props.match.params.albumID].name + \" \"}\n
\n\n\n {this.state.showGraph && }\n\n\n\t \t
\n\n\n \n {({width}) => (\n {\n var date = this.state.cellContents[rowStartIndex][0].date\n if (date) {\n if (date=='No Timestamp') {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:date,\n fromNow:date\n })\n } else {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:moment(date).format(\"MMMM Do YYYY\"),\n fromNow:moment(date).fromNow()\n })\n }\n }\n }}\n overscanRowCount={5}\n style={{outline:'none'}}\n cellRenderer={this.cellRenderer}\n onScroll={this.handleScroll}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height- topMenuHeight - 60}\n estimatedRowSize={totalListHeight/this.state.cellContents.length.toFixed(1)}\n rowHeight={({index})=> {\n if (this.state.cellContents[index][0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }}\n rowCount={this.state.cellContents.length}\n width={width}\n />\n )}\n \n\n { this.state.cellContents[this.state.currTopRenderedRowIdx][0] && (\n
\n
\n {this.state.date}
\n
\n
\n {this.state.fromNow}\n
\n
\n )}\n\n\n { this.state.lightboxShow &&\n this.setState({ lightboxShow: false })}\n onImageLoad={()=>{\n this.getPhotoDetails(this.state.idx2hash[this.state.lightboxImageIndex])\n }}\n onMovePrevRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length - 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}\n onMoveNextRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length + 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}/>\n }\n\n\t\t\t\t
\n\t )\n }\n else {\n \treturn (\n \t\t
\n \t)\n }\n }\n}\n*/\n\nHiddenPhotos = connect((store)=>{\n return {\n favoritePhotos: store.photos.favoritePhotos,\n fetchingFavoritePhotos: store.photos.fetchingFavoritePhotos,\n fetchedFavoritePhotos: store.photos.fetchedFavoritePhotos,\n\n hiddenPhotos: store.photos.hiddenPhotos,\n fetchingHiddenPhotos: store.photos.fetchingHiddenPhotos,\n fetchedHiddenPhotos: store.photos.fetchedHiddenPhotos,\n\n albumsPeople: store.albums.albumsPeople,\n fetchingAlbumsPeople: store.albums.fetchingAlbumsPeople,\n fetchedAlbumsPeople: store.albums.fetchedAlbumsPeople,\n people: store.people.people,\n fetchedPeople: store.people.fetched,\n fetchingPeople: store.people.fetching,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n }\n})(HiddenPhotos)\n" }, { "path": "src/layouts/PublicUserList.js", "content": "import React, { Component } from \"react\";\nimport { Header, Image, Item, Icon, Grid, Divider } from \"semantic-ui-react\";\nimport {\n fetchUserPublicPhotos,\n fetchPublicUserList\n} from \"../actions/publicActions\";\nimport { connect } from \"react-redux\";\nimport { PhotoListView } from \"./ReusablePhotoListView\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport {\n TopMenu,\n SideMenuNarrow,\n TopMenuPublic,\n SideMenuNarrowPublic\n} from \"./menubars\";\nimport { Link } from \"react-router-dom\";\nimport { serverAddress } from \"../api_client/apiClient\";\n\nvar TOP_MENU_HEIGHT = 45; // don't change this\nvar LEFT_MENU_WIDTH = 85; // don't change this\n\nexport class PublicUserList extends Component {\n componentDidMount() {\n this.props.dispatch(fetchPublicUserList());\n }\n render() {\n if (this.props.auth.access) {\n var menu = (\n
\n {this.props.ui.showSidebar && }\n \n
\n );\n } else {\n var menu = (\n
\n {this.props.ui.showSidebar && }\n \n
\n );\n }\n return (\n
\n {menu}\n \n
\n
\n \n \n Users{\" \"}\n \n Showing {this.props.pub.publicUserList.length} users\n \n \n
\n
\n
\n {this.props.pub.publicUserList.map((el, idx) => {\n if (el.first_name.length > 0 && el.last_name.length > 0) {\n var displayName = el.first_name + \" \" + el.last_name;\n } else {\n var displayName = el.username;\n }\n\n return (\n
\n
\n \n \n {displayName}\n \n {el.public_photo_count} public photos\n \n \n
\n {false && (\n \n \n \n {el.public_photo_samples\n .slice(0, this.props.ui.gridType === \"dense\" ? 10 : 6)\n .map(photo => (\n \n \n \n ))}\n \n \n )}\n
\n );\n })}\n
\n
\n \n );\n }\n}\n\nPublicUserList = connect(store => {\n return {\n pub: store.pub,\n ui: store.ui,\n auth: store.auth\n };\n})(PublicUserList);\n" }, { "path": "src/layouts/RVListExample.js", "content": "/**\n * @flow\n */\nimport cn from \"classnames\";\nimport Immutable from \"immutable\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent } from \"react\";\nimport {\n fetchPeopleAlbums, \n fetchAutoAlbums, \n fetchDateAlbumsList} from '../actions/albumsActions'\nimport {fetchPhotos} from '../actions/photosActions'\n\nimport {\n Collection,\n CellMeasurer,\n CellMeasurerCache,\n createMasonryCellPositioner,\n Masonry,\n AutoSizer,\n List,\n WindowScroller,\n} from 'react-virtualized';\nimport { connect } from \"react-redux\";\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer,\n Container, Label, Popup, Segment, Button, Icon} from 'semantic-ui-react';\nimport {Server, serverAddress} from '../api_client/apiClient'\n\nfunction toInt(n){ return Math.round(Number(n)); };\n\n\nconst cache = new CellMeasurerCache({\n defaultHeight: 50,\n fixedWidth: true\n});\n\n\nexport class ListExample extends PureComponent {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n groupedPhotos: {},\n thumbnailSize: 150\n };\n\n // this._getRowHeight = this._getRowHeight.bind(this);\n // this._onResize = this._onResize.bind(this);\n // this._noRowsRenderer = this._noRowsRenderer.bind(this);\n // this._onRowCountChange = this._onRowCountChange.bind(this);\n // this._onScrollToRowChange = this._onScrollToRowChange.bind(this);\n this._rowRenderer = this._rowRenderer.bind(this);\n this._renderAutoSizer = this._renderAutoSizer.bind(this);\n this._renderList = this._renderList.bind(this);\n this.groupPhotosByDate = this.groupPhotosByDate.bind(this);\n }\n\n\n componentWillMount(){\n this.props.dispatch(fetchPhotos())\n }\n\n groupPhotosByDate(photos) {\n var photosGroupedByDate = {}\n photosGroupedByDate['Unknown Date'] = []\n photos.map(function(photo){\n if (photo.exif_timestamp != null) {\n var date = photo.exif_timestamp.split('T')[0]\n if (photosGroupedByDate.hasOwnProperty(date)){\n photosGroupedByDate[date].push(photo)\n }\n else{\n photosGroupedByDate[date] = []\n photosGroupedByDate[date].push(photo)\n }\n }\n else {\n photosGroupedByDate['Unknown Date'].push(photo) \n }\n })\n return photosGroupedByDate\n }\n\n\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.photos.length > 0){\n var groupedPhotos = this.groupPhotosByDate(nextProps.photos)\n this.setState({groupedPhotos:groupedPhotos})\n }\n }\n\n render() {\n if (this.props.fetchedPhotos) {\n return (\n \n {this._renderAutoSizer}\n \n );\n }\n else {\n return (\n
fetching photos
\n )\n }\n }\n\n _renderList({width}){\n return (\n \n ); \n }\n\n _renderAutoSizer({ height, scrollTop }) {\n this._height = height;\n this._scrollTop = scrollTop;\n return (\n \n {this._renderList}\n \n );\n }\n\n // _onResize({ width }) {\n // this._width = width - 215;\n // }\n\n\n\n\n // _getRowHeight({ index }) {\n // var key = Object.keys(this.state.groupedPhotos)[index];\n // var numPhotosInGroup = this.state.groupedPhotos[key].length\n // var numPhotosPerRow = toInt(Math.floor(this._width/(this.state.thumbnailSize+7)))\n // var numPhotosPerCol = toInt(Math.ceil(numPhotosInGroup/numPhotosPerRow))\n // var rowHeight = numPhotosPerCol * (this.state.thumbnailSize+7)\n\n // var rowHeight = toInt(rowHeight)\n // console.log(rowHeight)\n // return toInt(rowHeight)+100\n // }\n\n // var thumbnailSize = this.state.thumbnailSize+7\n // var height = 0\n // var keys = Object.keys(this.state.groupedPhotos)\n // console.log(keys.length)\n // var groupedPhotos = this.state.groupedPhotos\n // var width = this._width\n // keys.map(function(key){\n // var numPhotosInGroup = groupedPhotos[key].length\n // var numPhotosPerRow = width/thumbnailSize\n // var numPhotosPerCol = numPhotosInGroup/numPhotosPerRow\n // var rowHeight = numPhotosPerCol * thumbnailSize\n // height += rowHeight\n // })\n // return toInt(height)\n // }\n\n // _noRowsRenderer() {\n // return
No rows
;\n // }\n\n // _onRowCountChange(event) {\n // console.log('row count changed')\n // const rowCount = parseInt(event.target.value, 10) || 0;\n\n // this.setState({ rowCount });\n // }\n\n // _onScrollToRowChange(event) {\n // const { rowCount } = this.state;\n // let scrollToIndex = Math.min(\n // rowCount - 1,\n // parseInt(event.target.value, 10)\n // );\n\n // if (isNaN(scrollToIndex)) {\n // scrollToIndex = undefined;\n // }\n\n // this.setState({ scrollToIndex });\n // }\n\n _rowRenderer({ index, isScrolling, key, parent, style, isVisible }) {\n console.log(index,isVisible)\n console.log(this.props.photos.length)\n\n var group = this.state.groupedPhotos[Object.keys(this.state.groupedPhotos)[index]]\n var thumbnailSize = this.state.thumbnailSize\n var mappedImages = group.map(function(photo,idx){\n return (\n \n )\n })\n\n return (\n \n {\n ({measure}) => (\n
\n {index}:\n
\n )\n }\n \n )\n }\n}\n\n\n\n\n\nListExample = connect((store)=>{\n return {\n fetchingPhotos:store.photos.fetchingPhotos,\n fetchedPhotos:store.photos.fetchedPhotos,\n photos:store.photos.photos,\n }\n})(ListExample)\n\n\n" }, { "path": "src/layouts/RecentlyAddedPhotos.js", "content": "import React, { Component } from \"react\";\n\nimport { connect } from \"react-redux\";\nimport {fetchRecentlyAddedPhotos} from '../actions/photosActions';\nimport {Container, Icon, Divider, Header, Image, Button, Flag, Card, Loader} from 'semantic-ui-react'\nimport { push } from 'react-router-redux'\n\nimport _ from 'lodash'\nimport moment from 'moment'\nimport {PhotoListView} from './ReusablePhotoListView'\n\nvar topMenuHeight = 55 // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nvar DAY_HEADER_HEIGHT = 70\nvar leftMenuWidth = 85 // don't change this\n\nexport class RecentlyAddedPhotos extends Component {\n componentDidMount() {\n this.props.dispatch(fetchRecentlyAddedPhotos())\n }\n render() {\n const {fetchingRecentlyAddedPhotos,fetchedRecentlyAddedPhotos} = this.props\n return (\n \n )\n }\n}\n\nRecentlyAddedPhotos = connect(store => {\n return {\n fetchingRecentlyAddedPhotos: store.photos.fetchingRecentlyAddedPhotos,\n fetchedRecentlyAddedPhotos: store.photos.fetchedRecentlyAddedPhotos,\n recentlyAddedPhotos: store.photos.recentlyAddedPhotos,\n recentlyAddedIdx2hash: store.photos.recentlyAddedIdx2hash\n };\n})(RecentlyAddedPhotos);\n" }, { "path": "src/layouts/ReusablePhotoListView.js", "content": "import React, { Component } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Grid, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport \"react-virtualized/styles.css\"; // only needs to be imported once\nimport { connect } from \"react-redux\";\n\nimport {\n fetchDateAlbumsPhotoHashList,\n fetchAlbumsDateGalleries,\n fetchUserAlbumsList,\n editUserAlbum,\n createNewUserAlbum\n} from \"../actions/albumsActions\";\n\nimport {\n fetchPhotos,\n fetchPhotoDetail,\n setPhotosFavorite,\n setPhotosHidden,\n setPhotosPublic\n} from \"../actions/photosActions\";\n\nimport { copyToClipboard } from \"../util/util\";\nimport { SecuredImage, SecuredImageJWT } from \"../components/SecuredImage\";\nimport { ModalPhotosShare } from \"../components/ModalPhotosShare\";\nimport { ModalAlbumShare } from \"../components/ModalAlbumShare\";\nimport {\n Dropdown,\n Checkbox,\n Card,\n Header,\n Divider,\n Item,\n Loader,\n Dimmer,\n Sticky,\n Portal,\n Image,\n List,\n Input,\n Rating,\n Container,\n Label,\n Popup,\n Segment,\n Button,\n Icon,\n Table,\n Transition,\n Breadcrumb\n} from \"semantic-ui-react\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport { LightBox } from \"../components/lightBox\";\nimport { LightBoxV2 } from \"../components/LightBoxV2\";\nimport LazyLoad from \"react-lazyload\";\n// import Lightbox from 'react-image-lightbox';\nimport { LocationMap } from \"../components/maps\";\nimport { push } from \"react-router-redux\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport styles from \"../App.css\";\nimport Draggable from \"react-draggable\";\nimport debounce from \"lodash/debounce\";\nimport _ from \"lodash\";\nimport * as moment from \"moment\";\nimport Modal from \"react-modal\";\n\nimport { calculateGridCells, calculateGridCellSize } from \"../util/gridUtils\";\nimport {\n ScrollSpeed,\n SPEED_THRESHOLD,\n SCROLL_DEBOUNCE_DURATION\n} from \"../util/scrollUtils\";\n\nvar TOP_MENU_HEIGHT = 45; // don't change this\nvar LEFT_MENU_WIDTH = 85; // don't change this\nvar SIDEBAR_WIDTH = 85;\nvar TIMELINE_SCROLL_WIDTH = 0;\nvar DAY_HEADER_HEIGHT = 70;\n\nif (window.innerWidth < 600) {\n var LIGHTBOX_SIDEBAR_WIDTH = window.innerWidth;\n} else {\n var LIGHTBOX_SIDEBAR_WIDTH = 360;\n}\n\nfunction fuzzy_match(str, pattern) {\n if (pattern.split(\"\").length > 0) {\n pattern = pattern.split(\"\").reduce(function(a, b) {\n return a + \".*\" + b;\n });\n return new RegExp(pattern).test(str);\n } else {\n return false;\n }\n}\n\nconst customStyles = {\n content: {\n top: 150,\n left: 40,\n right: 40,\n height: window.innerHeight - 300,\n\n overflow: \"hidden\",\n // paddingRight:0,\n // paddingBottomt:0,\n // paddingLeft:10,\n // paddingTop:10,\n padding: 0,\n backgroundColor: \"white\"\n },\n overlay: {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n position: \"fixed\",\n borderRadius: 0,\n border: 0,\n zIndex: 102,\n backgroundColor: \"rgba(200,200,200,0.8)\"\n }\n};\n\nexport class PhotoListView extends Component {\n constructor(props) {\n super(props);\n this.cellRenderer = this.cellRenderer.bind(this);\n this.handleResize = this.handleResize.bind(this);\n this.onPhotoClick = this.onPhotoClick.bind(this);\n this.getPhotoDetails = this.getPhotoDetails.bind(this);\n this.listRef = React.createRef();\n this.state = {\n cellContents: [[]],\n imagesGroupedByDate: [],\n hash2row: {},\n idx2hash: [],\n photos: {},\n lightboxImageIndex: 1,\n lightboxShow: false,\n lightboxSidebarShow: false,\n scrollToIndex: undefined,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200,\n numEntrySquaresPerRow: 10,\n currTopRenderedRowIdx: 0,\n scrollTop: 0,\n selectMode: false,\n selectedImageHashes: [],\n modalAddToAlbumOpen: false,\n modalSharePhotosOpen: false,\n modalAlbumShareOpen: false\n };\n }\n\n scrollSpeedHandler = new ScrollSpeed();\n\n handleScroll = ({ scrollTop }) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(\n this.scrollSpeedHandler.getScrollSpeed(scrollTop)\n );\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop: scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n };\n\n handleScrollEnd = debounce(() => {\n const { isScrollingFast } = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n componentDidMount() {\n // this.props.dispatch(fetchPhotos())\n // if (this.props.photosGroupedByDate.length < 1) {\n // this.props.dispatch(fetchDateAlbumsPhotoHashList())\n // }\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize);\n }\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize);\n this.scrollSpeedHandler.clearTimeout();\n }\n\n handleResize() {\n if (this.props.showSidebar) {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10;\n } else {\n var columnWidth = window.innerWidth - 5 - 5 - 10;\n }\n\n const { entrySquareSize, numEntrySquaresPerRow } = calculateGridCellSize(\n columnWidth\n );\n var { cellContents, hash2row } = calculateGridCells(\n this.props.photosGroupedByDate,\n numEntrySquaresPerRow\n );\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow,\n cellContents: cellContents,\n hash2row: hash2row\n });\n if (this.listRef.current) {\n this.listRef.current.recomputeGridSize();\n }\n }\n\n onPhotoClick(hash) {\n this.setState({\n lightboxImageIndex: this.props.idx2hash.indexOf(hash),\n lightboxShow: true\n });\n }\n\n onPhotoSelect(hash) {\n var selectedImageHashes = this.state.selectedImageHashes;\n if (selectedImageHashes.includes(hash)) {\n selectedImageHashes = selectedImageHashes.filter(item => item !== hash);\n } else {\n selectedImageHashes.push(hash);\n }\n this.setState({ selectedImageHashes: selectedImageHashes });\n if (selectedImageHashes.length === 0) {\n this.setState({ selectMode: false });\n }\n }\n\n onGroupSelect(hashes) {\n if (\n _.intersection(hashes, this.state.selectedImageHashes).length ===\n hashes.length\n ) {\n // for deselect\n var selectedImageHashes = _.difference(\n this.state.selectedImageHashes,\n hashes\n );\n } else {\n var selectedImageHashes = _.union(this.state.selectedImageHashes, hashes);\n }\n this.setState({ selectedImageHashes: selectedImageHashes });\n if (selectedImageHashes.length === 0) {\n this.setState({ selectMode: false });\n }\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n if (this.state.cellContents[rowIndex][columnIndex]) {\n // non-empty cell\n const cell = this.state.cellContents[rowIndex][columnIndex];\n if (cell.date) {\n // header cell has 'date' attribute\n if (this.state.selectMode) {\n return (\n \n \n
\n \n \n {cell.date === \"No Timestamp\"\n ? \"No Timestamp\"\n : this.props.dayHeaderPrefix \n ? this.props.dayHeaderPrefix + moment(cell.date).format(\"MMM Do YYYY, dddd\") \n : moment(cell.date).format(\"MMM Do YYYY, dddd\")}\n \n \n {cell.photos.length} Photos\n \n \n
\n \n \n el.image_hash),\n this.state.selectedImageHashes\n ).length === cell.photos.length\n ? \"blue\"\n : \"grey\"\n }\n onClick={() => {\n const hashes = cell.photos.map(p => p.image_hash);\n this.onGroupSelect(hashes);\n }}\n size=\"mini\"\n icon=\"checkmark\"\n />\n \n \n );\n } else {\n return (\n \n
\n
\n \n \n {cell.date === \"No Timestamp\"\n ? \"No Timestamp\"\n : this.props.dayHeaderPrefix \n ? this.props.dayHeaderPrefix + moment(cell.date).format(\"MMM Do YYYY, dddd\") \n : moment(cell.date).format(\"MMM Do YYYY, dddd\")}\n {cell.location ? (\n \n \n {cell.location.places.join(\", \")}\n \n ) : (\n \n \n {cell.photos.length} Photos\n \n )}\n \n
\n
\n \n );\n }\n } else {\n // photo cell doesn't have 'date' attribute\n\n if (!this.state.isScrollingFast) {\n // photo cell not scrolling fast\n if (\n this.props.photoDetails[cell.image_hash]\n ? this.props.photoDetails[cell.image_hash].favorited\n : cell.favorited\n ) {\n var favIcon = (\n
\n {\n this.props.dispatch(\n setPhotosFavorite([cell.image_hash], false)\n );\n }}\n style={{ backgroundColor: \"white\" }}\n color=\"yellow\"\n name=\"star\"\n />\n
\n );\n } else {\n var favIcon = (\n \n {\n this.props.dispatch(\n setPhotosFavorite([cell.image_hash], true)\n );\n }}\n style={{ backgroundColor: \"white\" }}\n color=\"grey\"\n name=\"star\"\n />\n }\n />\n \n );\n }\n\n if (\n this.props.photoDetails[cell.image_hash]\n ? this.props.photoDetails[cell.image_hash].hidden\n : cell.hidden\n ) {\n var hiddenIcon = (\n
\n {\n this.props.dispatch(\n setPhotosHidden([cell.image_hash], false)\n );\n }}\n style={{ backgroundColor: \"white\" }}\n color=\"red\"\n name=\"hide\"\n />\n
\n );\n } else {\n var hiddenIcon = (\n \n {\n this.props.dispatch(\n setPhotosHidden([cell.image_hash], true)\n );\n }}\n style={{ backgroundColor: \"white\" }}\n color=\"grey\"\n name=\"hide\"\n />\n }\n />\n \n );\n }\n\n if (\n this.props.photoDetails[cell.image_hash]\n ? this.props.photoDetails[cell.image_hash].public\n : cell.public\n ) {\n var publicIcon = (\n
\n {\n this.props.dispatch(\n setPhotosPublic([cell.image_hash], false)\n );\n }}\n style={{ backgroundColor: \"white\" }}\n color=\"green\"\n name=\"globe\"\n />\n
\n );\n } else {\n var publicIcon = (\n \n {\n this.props.dispatch(\n setPhotosPublic([cell.image_hash], true)\n );\n copyToClipboard(\n serverAddress.replace('//','') +\n \"/media/photos/\" +\n cell.image_hash +\n \".jpg\"\n );\n }}\n style={{ backgroundColor: \"white\" }}\n name=\"globe\"\n color=\"grey\"\n />\n }\n />\n \n );\n }\n\n if (this.state.selectMode) {\n // select mode\n return (\n \n {(this.props.photoDetails[cell.image_hash]\n ? this.props.photoDetails[cell.image_hash].hidden\n : cell.hidden) && !this.props.showHidden ? (\n \n ) : (\n \n )}\n\n
\n {\n this.onPhotoSelect(cell.image_hash);\n }}\n name={\n this.state.selectedImageHashes.includes(cell.image_hash)\n ? \"checkmark\"\n : \"\"\n }\n color={\n this.state.selectedImageHashes.includes(cell.image_hash)\n ? \"blue\"\n : \"grey\"\n }\n />\n
\n {!this.props.isPublic && hiddenIcon}\n {!this.props.isPublic && favIcon}\n {!this.props.isPublic && publicIcon}\n \n );\n } else {\n // normal mode\n\n return (\n
\n {(this.props.photoDetails[cell.image_hash]\n ? this.props.photoDetails[cell.image_hash].hidden\n : cell.hidden) && !this.props.showHidden ? (\n \n ) : (\n {\n this.onPhotoClick(cell.image_hash);\n }}\n height={this.state.entrySquareSize}\n width={this.state.entrySquareSize}\n src={\n serverAddress +\n \"/media/square_thumbnails/\" +\n cell.image_hash +\n \".jpg\"\n }\n />\n )}\n\n \n {!this.props.isPublic && (\n {\n if (!this.props.isPublic) {\n this.onPhotoSelect(cell.image_hash);\n this.setState({ selectMode: true });\n }\n }}\n name=\"checkmark\"\n color={\n this.state.selectedImageHashes.includes(cell.image_hash)\n ? \"blue\"\n : \"grey\"\n }\n />\n )}\n
\n {!this.props.isPublic && hiddenIcon}\n {!this.props.isPublic && favIcon}\n {!this.props.isPublic && publicIcon}\n \n );\n }\n } else {\n return (\n \n );\n }\n }\n } else {\n // empty cell\n return
;\n }\n };\n\n getPhotoDetails(image_hash) {\n this.props.dispatch(fetchPhotoDetail(image_hash));\n }\n\n componentDidUpdate(prevProps, prevState, snapshot) {\n if (prevProps.showSidebar !== this.props.showSidebar) {\n this.handleResize();\n }\n if (prevProps.gridType !== this.props.gridType) {\n this.handleResize();\n }\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n var t0 = performance.now();\n const imagesGroupedByDate = nextProps.photosGroupedByDate;\n var t1 = performance.now();\n\n var idx2hash = [];\n\n const { cellContents, hash2row } = calculateGridCells(\n imagesGroupedByDate,\n prevState.numEntrySquaresPerRow\n );\n const nextState = {\n ...prevState,\n cellContents,\n hash2row,\n imagesGroupedByDate\n };\n return nextState;\n }\n\n render() {\n const { lightboxImageIndex } = this.state;\n if (\n this.props.loading ||\n this.props.idx2hash.length < 1 ||\n this.props.photosGroupedByDate.length < 1\n ) {\n //if (true) {\n return (\n
\n
\n
\n \n \n {this.props.title}\n \n {this.props.loading ? (\n Loading...\n ) : (\n \n {this.props.photosGroupedByDate.length} Days,{\" \"}\n {this.props.idx2hash.length} Photos\n \n )}\n \n
\n
\n\n {this.props.idx2hash.length < 1 ||\n this.props.photosGroupedByDate.length < 1 ? (\n \n
{this.props.noResultsMessage}
\n
\n ) : (\n \n {({ width }) => (\n {\n if (rowIndex % 3 === 0 && columnIndex === 0) {\n return (\n \n \n
\n );\n } else if (rowIndex % 3 === 0 && columnIndex > 0) {\n return
;\n } else {\n return (\n
\n \n
\n );\n }\n }}\n columnWidth={width / this.state.numEntrySquaresPerRow}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height - TOP_MENU_HEIGHT - 60}\n rowHeight={({ index }) => {\n if (index % 3) {\n return (\n width.toFixed(1) / this.state.numEntrySquaresPerRow\n );\n } else {\n return DAY_HEADER_HEIGHT;\n }\n }}\n rowCount={5000}\n width={width}\n />\n )}\n \n )}\n
\n );\n }\n var totalListHeight = this.state.cellContents\n .map((row, index) => {\n if (row[0].date) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n })\n .reduce((a, b) => a + b, 0);\n\n console.log(this.props);\n\n if (this.props.route.location.pathname.startsWith(\"/useralbum/\")) {\n var isUserAlbum = true;\n } else {\n var isUserAlbum = false;\n }\n\n return (\n
\n
\n
\n \n \n {this.props.title}{\" \"}\n \n {this.props.photosGroupedByDate.length} days,{\" \"}\n {this.props.idx2hash.length} photos\n {this.props.additionalSubHeader}\n \n \n
\n
\n\n {true &&\n !this.props.isPublic && (\n \n {/* {\n this.setState({ selectMode: !this.state.selectMode });\n if (this.state.selectMode) {\n this.setState({ selectedImageHashes: [] });\n }\n }}\n /> */}\n\n \n {\n this.setState({ selectMode: !this.state.selectMode });\n if (this.state.selectMode) {\n this.setState({ selectedImageHashes: [] });\n }\n }}\n label={{\n as: \"a\",\n basic: true,\n content: `${\n this.state.selectedImageHashes.length\n } selected`\n }}\n labelPosition=\"right\"\n />\n }\n content=\"Toggle select mode\"\n inverted\n />\n \n\n \n {\n if (\n this.state.selectedImageHashes.length ===\n this.props.idx2hash.length\n ) {\n this.setState({ selectedImageHashes: [] });\n } else {\n this.setState({\n selectMode: true,\n selectedImageHashes: this.props.idx2hash\n });\n }\n }}\n >\n \n \n }\n content={\n this.state.selectedImageHashes.length ===\n this.props.idx2hash.length\n ? \"Deselect all\"\n : \"Select All\"\n }\n />\n \n\n \n \n \n \n Photo Actions ({this.state.selectedImageHashes.length} selected)\n \n\n \n {\n this.props.dispatch(\n setPhotosFavorite(\n this.state.selectedImageHashes,\n true\n )\n );\n }}\n >\n \n {\" Favorite\"}\n \n {\n this.props.dispatch(\n setPhotosFavorite(\n this.state.selectedImageHashes,\n false\n )\n );\n }}\n >\n \n {\" Unfavorite\"}\n \n\n \n {\n this.props.dispatch(\n setPhotosHidden(this.state.selectedImageHashes, true)\n );\n }}\n >\n \n {\" Hide\"}\n \n {\n this.props.dispatch(\n setPhotosHidden(this.state.selectedImageHashes, false)\n );\n }}\n >\n \n {\" Unhide\"}\n \n\n \n {\n this.props.dispatch(\n setPhotosPublic(this.state.selectedImageHashes, true)\n );\n const linksToCopy = this.state.selectedImageHashes\n .map(\n ih => serverAddress.replace('//','') + \"/media/photos/\" + ih + \".jpg\"\n )\n .join(\"\\n\");\n copyToClipboard(linksToCopy);\n }}\n >\n \n {\" Make Public\"}\n \n {\n this.props.dispatch(\n setPhotosPublic(this.state.selectedImageHashes, false)\n );\n }}\n >\n \n {\" Make Private\"}\n \n\n \n {\n if (this.state.selectedImageHashes.length > 0) {\n this.setState({ modalSharePhotosOpen: true });\n }\n }}\n >\n \n {\" Sharing\"}\n \n }\n content=\"Open sharing panel for selected photos\"\n />\n \n \n Album Actions\n \n {\n //todo\n this.setState({ modalAlbumShareOpen: true });\n }}\n >\n \n {\" Sharing\"}\n \n }\n content=\"Open sharing panel for the current album\"\n />\n \n\n\n\n \n \n \n\n \n \n \n \n Album ({this.state.selectedImageHashes.length} selected)\n \n \n {\n if (this.state.selectedImageHashes.length > 0) {\n this.setState({ modalAddToAlbumOpen: true });\n }\n }}\n >\n \n {\" Album\"}\n \n \n \n \n\n {false && isUserAlbum && (\n {\n this.setState({ modalAlbumShareOpen: true });\n }}\n >\n \n }\n content=\"Small thumbnails\"\n />\n {\n this.props.dispatch({\n type: \"SET_GRID_TYPE\",\n payload: \"loose\"\n });\n }}\n icon\n >\n \n \n }\n content=\"Big thumbnails\"\n />\n \n
\n )}\n\n \n {({ width }) => (\n {\n const cell = this.state.cellContents[rowStartIndex][0];\n if (cell.date) {\n var date = cell.date;\n if (date == \"No Timestamp\") {\n this.setState({\n date: date,\n fromNow: date\n });\n } else {\n this.setState({\n date: moment(date).format(\"MMMM Do YYYY\"),\n fromNow: moment(date).fromNow()\n });\n }\n }\n }}\n overscanRowCount={5}\n style={{ outline: \"none\" }}\n cellRenderer={this.cellRenderer}\n onScroll={this.handleScroll}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={\n this.props.isPublic\n ? this.state.height - TOP_MENU_HEIGHT - 60\n : this.state.height - TOP_MENU_HEIGHT - 60 - 40\n // this.state.selectMode\n // ? this.state.height - TOP_MENU_HEIGHT - 60 - 40\n // : this.state.height - TOP_MENU_HEIGHT - 60\n }\n estimatedRowSize={\n totalListHeight / this.state.cellContents.length.toFixed(1)\n }\n rowHeight={({ index }) => {\n if (this.state.cellContents[index][0].date) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n }}\n rowCount={this.state.cellContents.length}\n width={width}\n />\n )}\n \n\n {this.state.cellContents[this.state.currTopRenderedRowIdx][0] && (\n \n \n \n {\n this.props.dayHeaderPrefix \n ? this.props.dayHeaderPrefix + this.state.date\n : this.state.date\n }
\n \n
\n {this.state.fromNow}\n
\n \n )}\n\n \n\n {this.state.lightboxShow &&\n false && (\n {\n this.setState({ lightboxShow: false });\n }}\n idx2hash={this.props.idx2hash}\n lightboxImageIndex={this.state.lightboxImageIndex}\n onImageLoad={() => {\n this.getPhotoDetails(\n this.props.idx2hash[this.state.lightboxImageIndex]\n );\n }}\n />\n )}\n\n {this.state.lightboxShow && (\n this.setState({ lightboxShow: false })}\n onImageLoad={() => {\n this.getPhotoDetails(\n this.props.idx2hash[this.state.lightboxImageIndex]\n );\n }}\n onMovePrevRequest={() => {\n var prevIndex =\n (this.state.lightboxImageIndex +\n this.props.idx2hash.length -\n 1) %\n this.props.idx2hash.length;\n this.setState({\n lightboxImageIndex: prevIndex\n });\n var rowIdx = this.state.hash2row[this.props.idx2hash[prevIndex]];\n this.listRef.current.scrollToCell({\n columnIndex: 0,\n rowIndex: rowIdx\n });\n this.getPhotoDetails(this.props.idx2hash[prevIndex]);\n }}\n onMoveNextRequest={() => {\n var nextIndex =\n (this.state.lightboxImageIndex +\n this.props.idx2hash.length +\n 1) %\n this.props.idx2hash.length;\n this.setState({\n lightboxImageIndex: nextIndex\n });\n var rowIdx = this.state.hash2row[this.props.idx2hash[nextIndex]];\n this.listRef.current.scrollToCell({\n columnIndex: 0,\n rowIndex: rowIdx\n });\n this.getPhotoDetails(this.props.idx2hash[nextIndex]);\n }}\n />\n )}\n\n {!this.props.isPublic && (\n {\n this.setState({\n modalAddToAlbumOpen: false\n });\n }}\n selectedImageHashes={this.state.selectedImageHashes}\n />\n )}\n {!this.props.isPublic && (\n {\n this.setState({\n modalSharePhotosOpen: false\n });\n }}\n selectedImageHashes={this.state.selectedImageHashes}\n />\n )}\n {!this.props.isPublic &&\n isUserAlbum && (\n {\n this.setState({\n modalAlbumShareOpen: false\n });\n }}\n match={this.props.match}\n selectedImageHashes={this.state.selectedImageHashes}\n />\n )}\n \n );\n }\n}\n\nclass ModalAlbumEdit extends Component {\n state = { newAlbumTitle: \"\" };\n render() {\n if (this.state.newAlbumTitle.length > 0) {\n var filteredUserAlbumList = this.props.albumsUserList.filter(el =>\n fuzzy_match(\n el.title.toLowerCase(),\n this.state.newAlbumTitle.toLowerCase()\n )\n );\n } else {\n var filteredUserAlbumList = this.props.albumsUserList;\n }\n return (\n {\n this.props.dispatch(fetchUserAlbumsList());\n }}\n isOpen={this.props.isOpen}\n onRequestClose={() => {\n this.props.onRequestClose();\n this.setState({ newAlbumTitle: \"\" });\n }}\n style={customStyles}\n >\n
\n
\n Add to Album\n \n Add selected {this.props.selectedImageHashes.length} photo(s)\n to...\n \n
\n
\n \n \n \n {this.props.selectedImageHashes.map(image_hash => (\n \n ))}\n \n \n \n \n
\n
New album
\n el.title.toLowerCase().trim())\n .includes(this.state.newAlbumTitle.toLowerCase().trim())}\n trigger={\n el.title.toLowerCase().trim())\n .includes(this.state.newAlbumTitle.toLowerCase().trim())}\n onChange={(e, v) => {\n this.setState({ newAlbumTitle: v.value });\n }}\n placeholder=\"Album title\"\n action\n >\n \n {\n this.props.dispatch(\n createNewUserAlbum(\n this.state.newAlbumTitle,\n this.props.selectedImageHashes\n )\n );\n this.props.onRequestClose();\n this.setState({ newAlbumTitle: \"\" });\n }}\n disabled={this.props.albumsUserList\n .map(el => el.title.toLowerCase().trim())\n .includes(this.state.newAlbumTitle.toLowerCase().trim())}\n type=\"submit\"\n >\n Create\n \n \n }\n />\n
\n \n {filteredUserAlbumList.length > 0 &&\n filteredUserAlbumList.map(item => {\n return (\n \n {\n this.props.dispatch(\n editUserAlbum(\n item.id,\n item.title,\n this.props.selectedImageHashes\n )\n );\n this.props.onRequestClose();\n }}\n as=\"a\"\n >\n \n \n {item.title}\n \n {item.photo_count} Item(s)
\n {\"Updated \" + moment(item.created_on).fromNow()}\n \n \n \n \n );\n })}\n \n \n );\n }\n}\n\nModalAlbumEdit = connect(store => {\n return {\n albumsUserList: store.albums.albumsUserList,\n fetchingAlbumsUserList: store.albums.fetchingAlbumsUserList,\n fetchedAlbumsUserList: store.albums.fetchedAlbumsUserList\n };\n})(ModalAlbumEdit);\n\nPhotoListView = connect(store => {\n return {\n showSidebar: store.ui.showSidebar,\n gridType: store.ui.gridType,\n\n photos: store.photos.photos,\n fetchingPhotos: store.photos.fetchingPhotos,\n fetchedPhotos: store.photos.fetchedPhotos,\n\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n\n route: store.routerReducer\n };\n})(PhotoListView);\n//photosGroupedByDate\n//idx2hash\n//title\n//subtitle\n//titleIconName\n//titleIconColor\n//isPublic\n" }, { "path": "src/layouts/SharedFromMe.js", "content": "import React, { Component } from \"react\";\nimport {\n Header,\n Image,\n Item,\n Icon,\n Grid as SUGrid,\n Divider,\n Menu,\n Loader,\n Label,\n Button,\n Popup\n} from \"semantic-ui-react\";\nimport { fetchPhotosSharedFromMe } from \"../actions/photosActions\";\nimport { fetchPublicUserList } from \"../actions/publicActions\";\nimport { fetchUserAlbumsSharedFromMe, deleteUserAlbum } from \"../actions/albumsActions\";\nimport { connect } from \"react-redux\";\nimport { PhotoListView } from \"./ReusablePhotoListView\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport {\n TopMenu,\n SideMenuNarrow,\n TopMenuPublic,\n SideMenuNarrowPublic\n} from \"./menubars\";\nimport { Link } from \"react-router-dom\";\nimport { serverAddress } from \"../api_client/apiClient\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport {\n calculateGridCellSize,\n calculateGridCells,\n calculateSharedPhotoGridCells,\n calculateSharedAlbumGridCells\n} from \"../util/gridUtils\";\nimport { ScrollSpeed, SCROLL_DEBOUNCE_DURATION } from \"../util/scrollUtils\";\nimport debounce from \"lodash/debounce\";\n\nvar TOP_MENU_HEIGHT = 45; // don't change this\nvar LEFT_MENU_WIDTH = 85; // don't change this\nconst SPEED_THRESHOLD = 300;\nvar SIDEBAR_WIDTH = 85;\nvar DAY_HEADER_HEIGHT = 70;\n\nexport class SharedFromMe extends Component {\n state = {\n activeItem: this.props.match.params.which,\n entrySquareSize: 200,\n numEntrySquaresPerRow: 10,\n photoGridContents: null,\n albumGridContents: null,\n isScrollingFast: false,\n topRowOwner: null\n };\n\n constructor(props) {\n super(props);\n this.photoGridRef = React.createRef();\n }\n\n scrollSpeedHandler = new ScrollSpeed();\n\n handleScroll = ({ scrollTop }) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(\n this.scrollSpeedHandler.getScrollSpeed(scrollTop)\n );\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop: scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n };\n\n handleScrollEnd = debounce(() => {\n const { isScrollingFast } = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n componentDidMount() {\n this.props.dispatch(fetchPublicUserList());\n this.props.dispatch(fetchPhotosSharedFromMe());\n this.props.dispatch(fetchUserAlbumsSharedFromMe());\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n handleItemClick = (e, { name }) => this.setState({ activeItem: name });\n\n static getDerivedStateFromProps(nextProps, prevState) {\n var photoGridContents = calculateSharedPhotoGridCells(\n nextProps.photos.photosSharedFromMe,\n prevState.numEntrySquaresPerRow\n ).cellContents;\n\n\n return {\n activeItem: nextProps.match.params.which,\n photoGridContents: photoGridContents,\n };\n }\n\n handleResize() {\n if (this.props.showSidebar) {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10;\n } else {\n var columnWidth = window.innerWidth - 5 - 5 - 10;\n }\n\n const { entrySquareSize, numEntrySquaresPerRow } = calculateGridCellSize(\n columnWidth\n );\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n if (this.photoGridRef.current) {\n this.photoGridRef.current.recomputeGridSize();\n }\n }\n\n photoCellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var cell = this.state.photoGridContents[rowIndex][columnIndex];\n if (this.state.photoGridContents[rowIndex][columnIndex]) {\n // non empty cell\n const cell = this.state.photoGridContents[rowIndex][columnIndex];\n if (cell.user_id) {\n // sharer info header\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === cell.user_id\n )[0];\n if (owner && owner.last_name.length + owner.first_name.length > 0) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = cell.user_id;\n }\n return (\n \n
\n \n \n {displayName}\n \n \n you shared {cell.photos.length} photos\n \n \n
\n \n );\n } else {\n // photo cell\n return (\n
\n {this.state.isScrollingFast ? (\n \n ) : (\n \n )}\n
\n );\n }\n } else {\n // empty cell\n return
;\n }\n };\n\n albumCellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var albumUserIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumUserIndex < this.props.albumsSharedFromMe.length) {\n return (\n
\n {\n //todo\n }}\n style={{ padding: 5 }}\n >\n \n
\n \n \n {\n this.props.albumsSharedFromMe[albumUserIndex].shared_to.length>0 && \n }\n content={\n this.props.albumsSharedFromMe[albumUserIndex].shared_to.map(el=>{\n return
{el.username}
\n })\n }/>\n\n }\n {this.props.albumsSharedFromMe[albumUserIndex].title}
\n {this.props.albumsSharedFromMe[albumUserIndex].photo_count} Photo(s)\n {true && (\n \n }\n content={\n
\n Are you sure you want to delete{\" \"}\n {this.props.albumsSharedFromMe[albumUserIndex].title}?
\n This action cannot be undone!
\n \n
\n \n this.props.dispatch(\n deleteUserAlbum(\n this.props.albumsSharedFromMe[albumUserIndex].id,\n this.props.albumsSharedFromMe[albumUserIndex].title\n )\n )\n }\n negative\n >\n Yes\n \n
\n
\n }\n on=\"focus\"\n position=\"bottom center\"\n />\n
\n )}\n \n \n );\n } else {\n return
;\n }\n };\n\n render() {\n const { activeItem } = this.state;\n\n if (activeItem === \"photos\") {\n var subheader = (\n \n {\" \"}\n {this.props.photos.photosSharedFromMe.length > 0 &&\n this.props.photos.photosSharedFromMe\n .map(el => el.photos.length)\n .reduce((a, b) => a + b)}{\" \"}\n {\" \"}photo share(s) with {\" \"}\n {this.props.photos.photosSharedFromMe.length}{\" \"} user(s) \n \n );\n var totalListHeight = this.state.photoGridContents\n .map((row, index) => {\n if (row[0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n })\n .reduce((a, b) => a + b, 0);\n } else {\n var subheader = (\n \n You shared{\" \"}\n {this.props.albums.albumsSharedFromMe.length} albums\n \n );\n }\n return (\n
\n
\n
\n \n \n \n \n \n {activeItem === \"photos\" ? \"Photos\" : \"Albums\"} you shared{\" \"}\n {subheader}\n \n
\n
\n
\n \n \n {\"Photos \"} \n \n \n {\"Albums \"} \n \n \n
\n \n {this.state.topRowOwner && activeItem==='photos' && (\n \n )}\n
\n\n {activeItem === \"photos\" && this.state.photoGridContents.length === 0}\n\n {activeItem === \"photos\" &&\n this.props.photos.fetchingPhotosSharedFromMe &&\n !this.props.photos.fetchedPhotosSharedFromMe && (\n Loading photos you shared...\n )}\n\n {activeItem === \"photos\" &&\n this.state.photoGridContents.length === 0 &&\n this.props.photos.fetchedPhotosSharedFromMe && (\n
You haven't shared any photos with anyone.
\n )}\n\n {activeItem === \"photos\" &&\n this.state.photoGridContents.length > 0 &&\n this.state.photoGridContents && (\n
\n \n {({ width }) => (\n {\n const cell = this.state.photoGridContents[\n rowStartIndex\n ][0];\n if (cell.user_id) {\n var sharedTo = cell.photos[0].shared_to.username;\n } else {\n var sharedTo = cell.shared_to.username;\n }\n this.setState({ topRowOwner: sharedTo });\n }}\n style={{ outline: \"none\" }}\n disableHeader={false}\n onScroll={this.handleScroll}\n cellRenderer={this.photoCellRenderer}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height - 45 - 60 - 40}\n rowHeight={this.state.entrySquareSize}\n rowCount={this.state.photoGridContents.length}\n rowHeight={({ index }) => {\n if (this.state.photoGridContents[index][0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n }}\n estimatedRowSize={\n totalListHeight /\n this.state.photoGridContents.length.toFixed(1)\n }\n width={width}\n />\n )}\n \n
\n )}\n\n {activeItem === \"albums\" &&\n this.props.albums.fetchingAlbumsSharedFromMe &&\n !this.props.albums.fetchedAlbumsSharedFromMe && (\n Loading albums shared with you...\n )}\n\n {activeItem === \"albums\" &&\n this.props.albums.albumsSharedFromMe.length === 0 &&\n this.props.albums.fetchedAlbumsSharedFromMe && (\n
You haven't shared any albums yet.
\n )}\n\n {activeItem === \"albums\" &&\n this.props.albums.fetchedAlbumsSharedFromMe &&\n this.props.albums.albumsSharedFromMe.length > 0 && (\n
\n \n {({ width }) => (\n \n )}\n \n
\n )}\n\n {false &&\n activeItem === \"photos\" && (\n
\n {this.props.photos.photosSharedFromMe.map((el, idx) => {\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === el.user_id\n )[0];\n if (\n owner &&\n owner.last_name.length + owner.first_name.length > 0\n ) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = el.user_id;\n }\n\n return (\n
\n
\n \n \n {displayName}\n \n shared {el.photos.length} photos\n \n \n
\n {true && (\n
\n \n \n {el.photos\n //.slice(\n // 0,\n // this.props.ui.gridType === \"dense\" ? 5 : 3\n //)\n .map(photo => (\n \n \n \n ))}\n \n \n
\n )}\n
\n );\n })}\n
\n )}\n {false &&\n activeItem === \"albums\" && (\n
\n {this.props.albums.albumsSharedFromMe.map((el, idx) => {\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === el.user_id\n )[0];\n if (\n owner &&\n owner.last_name.length + owner.first_name.length > 0\n ) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = el.user_id;\n }\n\n return (\n
\n
\n \n \n {displayName}\n \n shared {el.albums.length} albums\n \n \n
\n {true && (\n
\n \n \n {el.albums\n //.slice(\n // 0,\n // this.props.ui.gridType === \"dense\" ? 5 : 3\n //)\n .map(album => (\n \n \n \n {album.title}\n
\n {album.photo_count} Photos\n
\n \n ))}\n \n \n
\n )}\n
\n );\n })}\n
\n )}\n \n );\n }\n}\n\nSharedFromMe = connect(store => {\n return {\n showSidebar: store.ui.showSidebar,\n pub: store.pub,\n ui: store.ui,\n auth: store.auth,\n photos: store.photos,\n albums: store.albums,\n albumsSharedFromMe: store.albums.albumsSharedFromMe\n\n };\n})(SharedFromMe);\n" }, { "path": "src/layouts/SharedToMe.js", "content": "import React, { Component } from \"react\";\nimport {\n Header,\n Image,\n Item,\n Icon,\n Grid as SUGrid,\n Divider,\n Menu,\n Loader,\n Label\n} from \"semantic-ui-react\";\nimport { fetchPhotosSharedToMe, fetchPhotosSharedFromMe } from \"../actions/photosActions\";\nimport { fetchPublicUserList } from \"../actions/publicActions\";\nimport { fetchUserAlbumsSharedToMe } from \"../actions/albumsActions\";\nimport { connect } from \"react-redux\";\nimport { PhotoListView } from \"./ReusablePhotoListView\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport {\n TopMenu,\n SideMenuNarrow,\n TopMenuPublic,\n SideMenuNarrowPublic\n} from \"./menubars\";\nimport { Link } from \"react-router-dom\";\nimport { serverAddress } from \"../api_client/apiClient\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport {\n calculateGridCellSize,\n calculateGridCells,\n calculateSharedPhotoGridCells,\n calculateSharedAlbumGridCells\n} from \"../util/gridUtils\";\nimport { ScrollSpeed, SCROLL_DEBOUNCE_DURATION } from \"../util/scrollUtils\";\nimport debounce from \"lodash/debounce\";\n\nvar TOP_MENU_HEIGHT = 45; // don't change this\nvar LEFT_MENU_WIDTH = 85; // don't change this\nconst SPEED_THRESHOLD = 300;\nvar SIDEBAR_WIDTH = 85;\nvar DAY_HEADER_HEIGHT = 70;\n\nexport class SharedToMe extends Component {\n state = {\n activeItem: this.props.match.params.which,\n entrySquareSize: 200,\n numEntrySquaresPerRow: 10,\n photoGridContents: null,\n albumGridContents: null,\n isScrollingFast: false,\n topRowOwner: null,\n };\n\n constructor(props) {\n super(props);\n this.photoGridRef = React.createRef();\n }\n\n scrollSpeedHandler = new ScrollSpeed();\n\n handleScroll = ({ scrollTop }) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(\n this.scrollSpeedHandler.getScrollSpeed(scrollTop)\n );\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop: scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n };\n\n handleScrollEnd = debounce(() => {\n const { isScrollingFast } = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n componentDidMount() {\n this.props.dispatch(fetchPublicUserList());\n this.props.dispatch(fetchPhotosSharedToMe());\n this.props.dispatch(fetchPhotosSharedFromMe());\n this.props.dispatch(fetchUserAlbumsSharedToMe());\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n }\n handleItemClick = (e, { name }) => this.setState({ activeItem: name });\n\n static getDerivedStateFromProps(nextProps, prevState) {\n var photoGridContents = calculateSharedPhotoGridCells(\n nextProps.photos.photosSharedToMe,\n prevState.numEntrySquaresPerRow\n ).cellContents;\n\n const albumGridContents = calculateSharedAlbumGridCells(\n nextProps.albums.albumsSharedToMe,\n prevState.numEntrySquaresPerRow\n ).cellContents;\n\n return {\n activeItem: nextProps.match.params.which,\n photoGridContents: photoGridContents,\n albumGridContents: albumGridContents\n };\n }\n\n handleResize() {\n if (this.props.showSidebar) {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10;\n } else {\n var columnWidth = window.innerWidth - 5 - 5 - 10;\n }\n\n const { entrySquareSize, numEntrySquaresPerRow } = calculateGridCellSize(\n columnWidth\n );\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n if (this.photoGridRef.current) {\n this.photoGridRef.current.recomputeGridSize();\n }\n }\n\n photoCellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var cell = this.state.photoGridContents[rowIndex][columnIndex];\n if (this.state.photoGridContents[rowIndex][columnIndex]) {\n // non empty cell\n const cell = this.state.photoGridContents[rowIndex][columnIndex];\n if (cell.user_id) {\n // sharer info header\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === cell.user_id\n )[0];\n if (owner && owner.last_name.length + owner.first_name.length > 0) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = cell.user_id;\n }\n return (\n \n
\n \n \n {displayName}\n \n \n shared {cell.photos.length} photos with you\n \n \n
\n \n );\n } else {\n // photo cell\n return (\n
\n {this.state.isScrollingFast ? (\n \n ) : (\n \n )}\n
\n );\n }\n } else {\n // empty cell\n return
;\n }\n };\n\n albumCellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var cell = this.state.albumGridContents[rowIndex][columnIndex];\n if (this.state.albumGridContents[rowIndex][columnIndex]) {\n // non empty cell\n const cell = this.state.albumGridContents[rowIndex][columnIndex];\n if (cell.user_id) {\n // sharer info header\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === cell.user_id\n )[0];\n if (owner && owner.last_name.length + owner.first_name.length > 0) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = cell.user_id;\n }\n return (\n \n
\n \n \n {displayName}\n \n \n shared {cell.albums.length} albums with you\n \n \n
\n
\n );\n } else {\n // photo cell\n return (\n
\n \n
\n {cell.title}\n
\n {cell.photo_count} photo(s)\n
\n
\n );\n }\n } else {\n // empty cell\n return
;\n }\n };\n\n render() {\n const { activeItem } = this.state;\n\n if (activeItem === \"photos\") {\n var subheader = (\n \n {this.props.photos.photosSharedToMe.length} user(s) shared{\" \"}\n {this.props.photos.photosSharedToMe.length > 0 &&\n this.props.photos.photosSharedToMe\n .map(el => el.photos.length)\n .reduce((a, b) => a + b)}{\" \"}\n photo(s) with you\n \n );\n var totalListHeight = this.state.photoGridContents\n .map((row, index) => {\n if (row[0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n })\n .reduce((a, b) => a + b, 0);\n } else {\n var subheader = (\n \n {this.props.albums.albumsSharedToMe.length} user(s) shared{\" \"}\n {this.props.albums.albumsSharedToMe.length > 0 &&\n this.props.albums.albumsSharedToMe\n .map(el => el.albums.length)\n .reduce((a, b) => a + b)}{\" \"}\n album(s) with you\n \n );\n var totalListHeight = this.state.albumGridContents\n .map((row, index) => {\n if (row[0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize + 40;\n }\n })\n .reduce((a, b) => a + b, 0);\n }\n return (\n
\n
\n
\n \n \n \n \n \n {activeItem === \"photos\" ? \"Photos\" : \"Albums\"} others shared{\" \"}\n {subheader}\n \n
\n
\n
\n \n \n {\"Photos \"} \n \n \n {\"Albums \"} \n \n \n
\n \n {this.state.topRowOwner && }\n
\n\n {activeItem === \"photos\" && this.state.photoGridContents.length === 0}\n\n {activeItem === \"photos\" &&\n this.props.photos.fetchingPhotosSharedToMe &&\n !this.props.photos.fetchedPhotosSharedToMe && (\n Loading photos shared with you...\n )}\n\n {activeItem === \"photos\" &&\n this.state.photoGridContents.length === 0 &&\n this.props.photos.fetchedPhotosSharedToMe && (\n
No one has shared any photos with you yet.
\n )}\n\n {activeItem === \"photos\" &&\n this.state.photoGridContents.length > 0 &&\n this.state.photoGridContents && (\n
\n \n {({ width }) => (\n {\n const cell = this.state.photoGridContents[rowStartIndex][0]\n if (cell.user_id) {\n var owner = cell.photos[0].owner.username\n } else {\n var owner = cell.owner.username\n }\n this.setState({topRowOwner:owner})\n }}\n style={{ outline: \"none\" }}\n disableHeader={false}\n onScroll={this.handleScroll}\n cellRenderer={this.photoCellRenderer}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height - 45 - 60 - 40}\n rowHeight={this.state.entrySquareSize}\n rowCount={this.state.photoGridContents.length}\n rowHeight={({ index }) => {\n if (this.state.photoGridContents[index][0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize;\n }\n }}\n estimatedRowSize={\n totalListHeight /\n this.state.photoGridContents.length.toFixed(1)\n }\n width={width}\n />\n )}\n \n
\n )}\n\n {activeItem === \"albums\" &&\n this.props.albums.fetchingAlbumsSharedToMe &&\n !this.props.albums.fetchedAlbumsSharedToMe && (\n Loading albums shared with you...\n )}\n\n {activeItem === \"albums\" &&\n this.state.albumGridContents.length === 0 &&\n this.props.albums.fetchedAlbumsSharedToMe && (\n
No one has shared any albums with you yet.
\n )}\n\n {activeItem === \"albums\" &&\n this.props.albums.fetchedAlbumsSharedToMe &&\n this.state.albumGridContents.length > 0 && (\n
\n \n {({ width }) => (\n {\n const cell = this.state.albumGridContents[rowStartIndex][0]\n if (cell.user_id) {\n var owner = cell.albums[0].owner.username\n } else {\n var owner = cell.owner.username\n }\n this.setState({topRowOwner:owner})\n }}\n style={{ outline: \"none\" }}\n disableHeader={false}\n onScroll={this.handleScroll}\n cellRenderer={this.albumCellRenderer}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height - 45 - 60 - 40}\n rowHeight={this.state.entrySquareSize}\n rowCount={this.state.albumGridContents.length}\n rowHeight={({ index }) => {\n if (this.state.albumGridContents[index][0].user_id) {\n //header row\n return DAY_HEADER_HEIGHT;\n } else {\n //photo row\n return this.state.entrySquareSize + 40;\n }\n }}\n estimatedRowSize={\n totalListHeight /\n this.state.albumGridContents.length.toFixed(1)\n }\n width={width}\n />\n )}\n \n
\n )}\n\n {false &&\n activeItem === \"photos\" && (\n
\n {this.props.photos.photosSharedToMe.map((el, idx) => {\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === el.user_id\n )[0];\n if (\n owner &&\n owner.last_name.length + owner.first_name.length > 0\n ) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = el.user_id;\n }\n\n return (\n
\n
\n \n \n {displayName}\n \n shared {el.photos.length} photos\n \n \n
\n {true && (\n
\n \n \n {el.photos\n //.slice(\n // 0,\n // this.props.ui.gridType === \"dense\" ? 5 : 3\n //)\n .map(photo => (\n \n \n \n ))}\n \n \n
\n )}\n
\n );\n })}\n
\n )}\n {false &&\n activeItem === \"albums\" && (\n
\n {this.props.albums.albumsSharedToMe.map((el, idx) => {\n const owner = this.props.pub.publicUserList.filter(\n e => e.id === el.user_id\n )[0];\n if (\n owner &&\n owner.last_name.length + owner.first_name.length > 0\n ) {\n var displayName = owner.first_name + \" \" + owner.last_name;\n } else if (owner) {\n var displayName = owner.username;\n } else {\n var displayName = el.user_id;\n }\n\n return (\n
\n
\n \n \n {displayName}\n \n shared {el.albums.length} albums\n \n \n
\n {true && (\n
\n \n \n {el.albums\n //.slice(\n // 0,\n // this.props.ui.gridType === \"dense\" ? 5 : 3\n //)\n .map(album => (\n \n \n \n {album.title}\n
\n {album.photo_count} Photos\n
\n \n ))}\n \n \n
\n )}\n
\n );\n })}\n
\n )}\n \n );\n }\n}\n\nSharedToMe = connect(store => {\n return {\n showSidebar: store.ui.showSidebar,\n pub: store.pub,\n ui: store.ui,\n auth: store.auth,\n photos: store.photos,\n albums: store.albums\n };\n})(SharedToMe);\n" }, { "path": "src/layouts/SignUpPage.js", "content": "import React, { Component } from \"react\";\nimport {\n Card,\n Image,\n Input,\n Header,\n Divider,\n Message,\n Item,\n Loader,\n Dimmer,\n Rating,\n Dropdown,\n Container,\n Label,\n Popup,\n Segment,\n Button,\n Icon,\n Form\n} from \"semantic-ui-react\";\nimport { connect } from \"react-redux\";\n\nimport { login, signup } from \"../actions/authActions\";\nimport * as reducers from \"../reducers\";\n\nimport { push } from \"react-router-redux\";\n\nexport class SignupPage extends Component {\n constructor(props) {\n super(props);\n this.onSubmit = this.onSubmit.bind(this);\n this.handleServerProtocolChange = this.handleServerProtocolChange.bind(\n this\n );\n }\n\n state = {\n username: \"\",\n password: \"\",\n firstname:\"\",\n lastname:\"\",\n passwordConfirm: \"\",\n serverAddress: \"\",\n email: \"\",\n serverProtocol: \"https://\"\n };\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value });\n\n handleServerProtocolChange = (e, { name, value }) =>\n this.setState({ serverProtocol: value });\n\n onSubmit(event) {\n event.preventDefault();\n this.props.dispatch(\n signup(\n this.state.username.toLowerCase(),\n this.state.password,\n this.state.email\n )\n );\n // console.log(this.props);\n // console.log(this.state.password)\n // this.props.onSubmit(this.state.username.toLowerCase(), this.state.password);\n }\n\n render() {\n\n const {\n username,\n password,\n firstname,\n lastname,\n email,\n passwordConfirm,\n serverAddress\n } = this.state;\n\n return (\n \n
\n
\n \n Ownphotos\n
\n \n
Signup
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 0 &&\n this.state.password !== this.state.passwordConfirm\n }\n icon=\"lock\"\n type=\"password\"\n placeholder=\"Password\"\n name=\"password\"\n value={password}\n onChange={this.handleChange}\n />\n \n 0 &&\n this.state.password !== this.state.passwordConfirm\n }\n icon=\"lock\"\n type=\"password\"\n placeholder=\"Confirm password\"\n name=\"passwordConfirm\"\n value={passwordConfirm}\n onChange={this.handleChange}\n />\n \n \n {\n this.props.dispatch(\n signup(\n this.state.username.toLowerCase(),\n this.state.password,\n this.state.email,\n this.state.firstname,\n this.state.lastname\n )\n );\n }}\n disabled={\n this.state.password.length === 0 ||\n this.state.password !== this.state.passwordConfirm\n }\n fluid\n color=\"blue\"\n >\n Sign Up\n \n \n
\n {this.props.errors &&\n this.props.errors.non_field_errors && (\n \n {this.props.errors.non_field_errors}\n \n )}\n {this.props.errors &&\n this.props.errors.password && (\n \n Password may not be blank!\n \n )}\n {this.props.errors &&\n this.props.errors.username && (\n \n Username may not be blank!\n \n )}\n
\n \n \n );\n }\n}\n\nSignupPage = connect(store => {\n return {\n auth: store.auth\n };\n})(SignupPage);\n" }, { "path": "src/layouts/UserManagement.js", "content": "import moment from \"moment\";\nimport React, { Component } from \"react\";\nimport Modal from \"react-modal\";\nimport { connect } from \"react-redux\";\nimport SortableTree from \"react-sortable-tree\";\nimport FileExplorerTheme from \"react-sortable-tree-theme-file-explorer\";\nimport { Button, Grid, Header, Icon, Input, Loader, Table } from \"semantic-ui-react\";\nimport { fetchDirectoryTree, fetchUserList, manageUpdateUser} from \"../actions/utilActions\";\n\n\n\n\nconst modalStyles = {\n content: {\n top: 150,\n left: 40,\n right: 40,\n height: window.innerHeight - 300,\n\n overflow: \"hidden\",\n // paddingRight:0,\n // paddingBottomt:0,\n // paddingLeft:10,\n // paddingTop:10,\n padding: 0,\n backgroundColor: \"white\"\n },\n overlay: {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n position: \"fixed\",\n borderRadius: 0,\n border: 0,\n zIndex: 102,\n backgroundColor: \"rgba(200,200,200,0.8)\"\n }\n};\n\nexport class UserManagement extends Component {\n state = { modalOpen: false, userToEdit: null };\n\n componentDidMount() {\n if (this.props.auth.access.is_admin) {\n this.props.dispatch(fetchUserList());\n this.props.dispatch(fetchDirectoryTree());\n }\n }\n\n render() {\n if (!this.props.auth.access.is_admin) {\n return
You have no access
;\n }\n if (this.props.fetching) {\n return (\n
\n \n
\n );\n }\n return (\n
\n
User Management
\n
\n \n \n Username\n Scan Directory\n Photo Count\n Last Login\n \n \n {this.props.userList.map(user => {\n return (\n \n {user.username}\n \n {\n this.setState({\n userToEdit: user,\n modalOpen: true\n });\n }}\n />\n {user.scan_directory ? user.scan_directory : \"Not set\"}\n \n {user.photo_count}\n \n {moment(user.date_joined).fromNow()}\n \n \n );\n })}\n \n
\n
\n {\n this.setState({ modalOpen: false });\n }}\n userToEdit={this.state.userToEdit}\n isOpen={this.state.modalOpen}\n />\n
\n );\n }\n}\n\nclass ModalScanDirectoryEdit extends Component {\n constructor(props) {\n super(props);\n this.state = { newScanDirectory: \"\", treeData: [] };\n this.nodeClicked = this.nodeClicked.bind(this);\n this.inputRef = React.createRef();\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.treeData.length === 0) {\n return { ...prevState, treeData: nextProps.directoryTree };\n } else {\n return prevState;\n }\n }\n\n nodeClicked(event, rowInfo) {\n console.log(rowInfo);\n this.inputRef.current.inputRef.value = rowInfo.node.absolute_path;\n this.setState({ newScanDirectory: rowInfo.node.absolute_path });\n }\n\n render() {\n console.log(this.inputRef);\n return (\n {\n this.props.onRequestClose();\n this.setState({ newScanDirectory: \"\" });\n }}\n style={modalStyles}\n >\n
\n
\n Set the scan directory for user \"{this.props.userToEdit\n ? this.props.userToEdit.username\n : \"...\"}\"\n \n When the user \"{this.props.userToEdit\n ? this.props.userToEdit.username\n : \"...\"}\" clicks on the 'scan photos' button, photos in the\n directory that you specify here will be imported under the user's\n account.\n \n
\n
\n \n \n \n
\n
User's current directory
\n
\n
\n \n \n {\n const newUserData = {\n ...this.props.userToEdit,\n scan_directory: this.state.newScanDirectory\n };\n console.log(newUserData);\n this.props.dispatch(manageUpdateUser(newUserData));\n this.props.onRequestClose()\n }}\n >\n Update\n \n \n
\n \n \n \n \n
\n
Choose a directory from below
\n
\n \n false}\n canDrop={() => false}\n treeData={this.state.treeData}\n onChange={treeData => this.setState({ treeData })}\n theme={FileExplorerTheme}\n generateNodeProps={rowInfo => {\n let nodeProps = {\n onClick: event => this.nodeClicked(event, rowInfo)\n };\n if (this.state.selectedNodeId === rowInfo.node.id) {\n nodeProps.className = \"selected-node\";\n }\n return nodeProps;\n }}\n />\n \n \n \n \n \n );\n }\n}\n\nUserManagement = connect(store => {\n return {\n auth: store.auth,\n\n userList: store.util.userList,\n fetchingUSerList: store.util.fetchingUserList,\n fetchedUserList: store.util.fetchedUserList\n };\n})(UserManagement);\n\nModalScanDirectoryEdit = connect(store => {\n return {\n auth: store.auth,\n\n directoryTree: store.util.directoryTree,\n fetchingDirectoryTree: store.util.fetchingDirectoryTree,\n fetchedDirectoryTree: store.util.fetchedDirectoryTree,\n\n userList: store.util.userList,\n fetchingUSerList: store.util.fetchingUserList,\n fetchedUserList: store.util.fetchedUserList\n };\n})(ModalScanDirectoryEdit);\n" }, { "path": "src/layouts/UserPublicPage.js", "content": "import React, { Component } from \"react\";\nimport { Header } from \"semantic-ui-react\";\nimport { fetchUserPublicPhotos } from \"../actions/publicActions\";\nimport { connect } from \"react-redux\";\nimport { PhotoListView } from \"./ReusablePhotoListView\";\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport {\n TopMenu,\n SideMenuNarrow,\n TopMenuPublic,\n SideMenuNarrowPublic\n} from \"./menubars\";\n\nvar TOP_MENU_HEIGHT = 45; // don't change this\nvar LEFT_MENU_WIDTH = 85; // don't change this\n\nexport class UserPublicPage extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n username: null\n };\n\n componentDidMount() {\n this.props.dispatch(\n fetchUserPublicPhotos(this.props.match.params.username)\n );\n // this.props.dispatch({ type: \"HIDE_SIDEBAR\" });\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (\n nextProps.pub.userPublicPhotos.hasOwnProperty(\n nextProps.match.params.username\n )\n ) {\n const photos =\n nextProps.pub.userPublicPhotos[nextProps.match.params.username];\n if (prevState.idx2hash.length !== photos.length) {\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos, el => {\n if (el.exif_timestamp) {\n return moment.utc(el.exif_timestamp).format(\"YYYY-MM-DD\");\n } else {\n return \"No Timestamp\";\n }\n });\n var groupedByDateList = _.reverse(\n _.sortBy(\n _.toPairsIn(groupedByDate).map(el => {\n return { date: el[0], photos: el[1] };\n }),\n el => el.date\n )\n );\n var idx2hash = [];\n groupedByDateList.forEach(g => {\n g.photos.forEach(p => {\n idx2hash.push(p.image_hash);\n });\n });\n var t1 = performance.now();\n return {\n ...prevState,\n photosGroupedByDate: groupedByDateList,\n idx2hash: idx2hash,\n username: nextProps.match.params.username\n };\n } else {\n return null;\n }\n } else {\n return null;\n }\n }\n\n render() {\n const { fetchingAlbumsUser } = this.props;\n if (this.props.auth.access) {\n var menu = (\n
\n {this.props.ui.showSidebar && }\n \n
\n );\n } else {\n var menu = (\n
\n {this.props.ui.showSidebar && }\n \n
\n );\n }\n return (\n
\n {menu}\n \n \n
\n \n );\n }\n}\nUserPublicPage = connect(store => {\n return {\n pub: store.pub,\n ui: store.ui,\n auth: store.auth\n };\n})(UserPublicPage);\n" }, { "path": "src/layouts//", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPlaceAlbum, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {Container, Icon, Divider, Header, Image, Button, Flag, Card, Loader} from 'semantic-ui-react'\nimport { fetchPeople, fetchEgoGraph } from '../actions/peopleActions';\nimport { fetchPhotoDetail, fetchNoTimestampPhotoList} from '../actions/photosActions';\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport { Grid, List, WindowScroller,AutoSizer } from 'react-virtualized';\nimport {EgoGraph} from '../components/egoGraph'\nimport { push } from 'react-router-redux'\nimport {countryNames} from '../util/countryNames'\nimport {AllPhotosMap, EventMap, LocationClusterMap, LocationMap} from '../components/maps'\nimport {LightBox} from '../components/lightBox'\n\nimport _ from 'lodash'\nimport moment from 'moment'\nimport {PhotoListView} from './ReusablePhotoListView'\n\n\nvar topMenuHeight = 55 // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nvar DAY_HEADER_HEIGHT = 70\nvar leftMenuWidth = 85 // don't change this\n\n\n\n\nexport class AlbumPlaceGallery extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n albumID: null,\n }\n \n componentDidMount() {\n this.props.dispatch(fetchPlaceAlbum(this.props.match.params.albumID))\n }\n\n\n componentDidUpdate() {\n console.log('component did update')\n if (this.props.match.params.albumID != this.state.albumID && !this.props.fetchingAlbumsPlace) {\n this.props.dispatch(fetchPlaceAlbum(this.props.match.params.albumID))\n }\n }\n\n \n \n \n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPlace.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPlace[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length != photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n var t1 = performance.now();\n console.log(t1-t0)\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n albumID:nextProps.match.params.albumID\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n \n \n \n render() {\n const {fetchingAlbumsPlace} = this.props\n return (\n \n ) \n }\n }\n\n\n\n\n\n\n\n/*\nexport class AlbumPlaceGallery extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n lightboxImageIndex: 1,\n lightboxShow:false,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200,\n showMap:false,\n gridHeight: window.innerHeight- topMenuHeight - 60,\n headerHeight: 60,\n currTopRenderedRowIdx:0,\n numEntrySquaresPerRow:2,\n }\n\n constructor() {\n super();\n this.listRef = React.createRef()\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this)\n this.cellRenderer = this.cellRenderer.bind(this)\n this.onPhotoClick = this.onPhotoClick.bind(this)\n }\n\n componentDidMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n this.props.dispatch(fetchPlaceAlbum(this.props.match.params.albumID))\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.calculateEntrySquareSize.bind(this))\n }\n\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2\n } \n else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 4\n }\n else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 6\n }\n else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 8\n }\n else {\n var numEntrySquaresPerRow = 10\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow\n })\n if (this.listRef.current) {\n this.listRef.current.recomputeRowHeights()\n }\n }\n\n onPhotoClick(hash) {\n this.setState({lightboxImageIndex:this.state.idx2hash.indexOf(hash),lightboxShow:true})\n }\n\n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPlace.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPlace[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length != photos.length) {\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n console.log(groupedByDate)\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n console.log(groupedByDateList)\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n\n\n rowRenderer = ({index, isScrolling, key, style}) => {\n const {isScrollingFast} = this.state;\n var rowHeight = this.state.entrySquareSize * Math.ceil(this.state.photosGroupedByDate[index].photos.length/this.state.numEntrySquaresPerRow.toFixed(1)) + DAY_HEADER_HEIGHT\n if (isScrollingFast) {\n return (\n
\n
\n \n
\n
\n )\n }\n else {\n return (\n
\n
\n \n
\n
\n ) }\n }\n\n getRowHeight = ({index}) => {\n var rowHeight = this.state.entrySquareSize * Math.ceil(this.state.photosGroupedByDate[index].photos.length/this.state.numEntrySquaresPerRow.toFixed(1)) + DAY_HEADER_HEIGHT\n return (\n rowHeight\n )\n }\n\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var photoIndex = rowIndex * this.state.numEntrySquaresPerRow + columnIndex\n if (photoIndex < this.props.albumsPlace[this.props.match.params.albumID].photos.length) {\n \tvar image_hash = this.props.albumsPlace[this.props.match.params.albumID].photos[photoIndex].image_hash\n return (\n
\n
{\n this.onPhotoClick(photoIndex)\n console.log('clicked')\n // this.props.dispatch(push(`/person/${this.props.albumsPlace[this.props.match.params.albumID][photoIndex].key}`))\n }}>\n \n\n
\n
\n )\n }\n else {\n return (\n
\n
\n )\n }\n }\n\n getPhotoDetails(image_hash) {\n if (!this.props.photoDetails.hasOwnProperty(image_hash)) {\n this.props.dispatch(fetchPhotoDetail(image_hash))\n }\n }\n\n render() {\n var entrySquareSize = this.state.entrySquareSize\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow\n if (this.props.albumsPlace.hasOwnProperty(this.props.match.params.albumID)) {\n var totalListHeight = this.state.photosGroupedByDate.map((day,index)=>{\n return (\n this.getRowHeight({index})\n )\n }).reduce((a,b)=>(a+b),0)\n\t return (\n\t
\n\n
\n \n
\n\n\n\n\t \t
\n\n\n
\n \n \n {this.props.albumsPlace[this.props.match.params.albumID].title} \n {countryNames.includes(this.props.albumsPlace[this.props.match.params.albumID].title.toLowerCase()) && }\n \n \t {this.props.albumsPlace[this.props.match.params.albumID].photos.length} Photos\n \n \n
\n\n\n {this.state.showMap && }\n\n\n\t \t
\n {\n this.setState({currTopRenderedRowIdx:startIndex})\n }}\n height={this.state.gridHeight}\n overscanRowCount={5}\n rowCount={this.state.photosGroupedByDate.length}\n rowHeight={this.getRowHeight}\n rowRenderer={this.rowRenderer}\n onScroll={this.handleScroll}\n estimatedRowSize={totalListHeight/this.state.photosGroupedByDate.length.toFixed(10)}\n width={this.state.width-leftMenuWidth-5}/> \n\n { this.state.lightboxShow &&\n this.setState({ lightboxShow: false })}\n onImageLoad={()=>{\n this.getPhotoDetails(this.state.idx2hash[this.state.lightboxImageIndex])\n }}\n onMovePrevRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length - 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}\n onMoveNextRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length + 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}/>\n }\n\n\n\n\t\t\t\t
\n\t )\n }\n else {\n \treturn (\n \t\t
\n \t)\n }\n }\n}\n*/\n\nAlbumPlaceGallery = connect((store)=>{\n return {\n albumsPlace: store.albums.albumsPlace,\n fetchingAlbumsPlace: store.albums.fetchingAlbumsPlace,\n fetchedAlbumsPlace: store.albums.fetchedAlbumsPlace,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n }\n})(AlbumPlaceGallery)\n" }, { "path": "src/layouts/albumAuto.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n fetchPeopleAlbums,\n fetchAutoAlbums,\n fetchAutoAlbumsList\n} from \"../actions/albumsActions\";\nimport {\n Container,\n Icon,\n Header,\n Button,\n Card,\n Loader,\n Label,\n Popup,\n Image,\n Divider\n} from \"semantic-ui-react\";\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport LazyLoad from \"react-lazyload\";\nimport { AlbumAutoMonths } from \"./albumAutoMonths\";\nimport { AlbumDateMonths } from \"./albumDateMonths\";\n\nimport {\n fetchUserAlbumsList,\n fetchThingAlbumsList,\n deleteUserAlbum\n} from \"../actions/albumsActions\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport { push } from \"react-router-redux\";\nimport store from \"../store\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumAuto extends Component {\n constructor() {\n super();\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200\n });\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.cellRenderer = this.cellRenderer.bind(this);\n }\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize);\n if (this.props.albumsAutoList.length === 0) {\n this.props.dispatch(fetchAutoAlbumsList());\n }\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var albumAutoIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumAutoIndex < this.props.albumsAutoList.length) {\n return (\n
\n {\n }}\n style={{ padding: 5 }}\n >\n \n
\n \n {this.props.albumsAutoList[albumAutoIndex].title}
\n {this.props.albumsAutoList[albumAutoIndex].photos.length} Photo(s)\n \n \n );\n } else {\n return
;\n }\n };\n\n render() {\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n return (\n
\n
\n
\n \n \n Events{\" \"}\n \n \n Showing {this.props.albumsAutoList.length} Auto created albums\n \n \n
\n
\n\n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n\nexport class EntrySquare extends Component {\n render() {\n var images = this.props.cover_photos.map(function(photo) {\n return (\n \n );\n }, this);\n return (\n {\n store.dispatch(searchPhotos(this.props.title));\n store.dispatch(push(\"/search\"));\n }}\n >\n
\n \n {images}\n \n
\n
\n {this.props.title} ({this.props.photoCount})\n
\n
\n );\n }\n}\n\nAlbumAuto = connect(store => {\n return {\n auth: store.auth,\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList\n };\n})(AlbumAuto);\n\n\n// import React, { Component } from \"react\";\n// import { connect } from \"react-redux\";\n// import {\n// fetchPeopleAlbums,\n// fetchAutoAlbums,\n// generateAutoAlbums,\n// fetchAutoAlbumsList\n// } from \"../actions/albumsActions\";\n// import { AlbumAutoCard, AlbumAutoGallery } from \"../components/album\";\n// import {\n// Container,\n// Icon,\n// Header,\n// Button,\n// Card,\n// Label,\n// Popup\n// } from \"semantic-ui-react\";\n// import {\n// fetchCountStats,\n// fetchPhotoScanStatus,\n// fetchAutoAlbumProcessingStatus\n// } from \"../actions/utilActions\";\n// import { SecuredImageJWT } from \"../components/SecuredImage\";\n\n// import { Server, serverAddress } from \"../api_client/apiClient\";\n\n// export class AlbumAuto extends Component {\n// componentWillMount() {\n// this.props.dispatch(fetchAutoAlbumsList());\n// var _dispatch = this.props.dispatch;\n// var intervalId = setInterval(function() {\n// _dispatch(fetchPhotoScanStatus());\n// _dispatch(fetchAutoAlbumProcessingStatus());\n// }, 2000);\n// this.setState({ intervalId: intervalId });\n// }\n\n// componentWillUnmount() {\n// clearInterval(this.state.intervalId);\n// }\n\n// handleAutoAlbumGen = e => this.props.dispatch(generateAutoAlbums());\n\n// render() {\n// if (this.props.fetchedAlbumsAutoList) {\n// var match = this.props.match;\n// var mappedAlbumCards = this.props.albumsAutoList.map(function(album) {\n// var albumTitle = album.title;\n// var albumDate = album.timestamp.split(\"T\")[0];\n// try {\n// var albumCoverURL = album.cover_photo_url;\n// } catch (err) {\n// console.log(err);\n// var albumCoverURL = null;\n// }\n// return (\n// \n// );\n// });\n// } else {\n// var mappedAlbumCards = null;\n// }\n\n// return (\n//
\n// \n// {mappedAlbumCards}\n// \n//
\n// );\n// }\n// }\n\n// AlbumAuto = connect(store => {\n// return {\n// albumsAuto: store.albums.albumsAuto,\n// fetchingAlbumsAuto: store.albums.fetchingAlbumsAuto,\n// fetchedAlbumsAuto: store.albums.fetchedAlbumsAuto,\n\n// albumsAutoList: store.albums.albumsAutoList,\n// fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n// fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n\n// generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n// generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n// statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n// statusPhotoScan: store.util.statusPhotoScan,\n// scanningPhotos: store.photos.scanningPhotos\n// };\n// })(AlbumAuto);\n" }, { "path": "src/layouts/albumAutoGalleryView.js", "content": "import React, { Component } from \"react\";\nimport {\n Card,\n Header,\n Divider,\n Item,\n Loader,\n Dimmer,\n Breadcrumb,\n Image,\n Container,\n Label,\n Popup,\n Segment,\n Button,\n Icon\n} from \"semantic-ui-react\";\nimport Gallery from \"react-grid-gallery\";\nimport VisibilitySensor from \"react-visibility-sensor\";\nimport { connect } from \"react-redux\";\n// import {Image} from '../components/authenticatedImage'\nimport { BrowserRouter as Router, Route, Link } from \"react-router-dom\";\nimport {\n fetchPeopleAlbums,\n fetchAutoAlbums,\n generateAutoAlbums,\n fetchAlbumsAutoGalleries\n} from \"../actions/albumsActions\";\nimport { Map, TileLayer, Marker } from \"react-leaflet\";\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport {\n fetchPhotoDetail,\n fetchNoTimestampPhotoList\n} from \"../actions/photosActions\";\n\nimport * as moment from \"moment\";\nimport _ from \"lodash\";\nimport { push } from \"react-router-redux\";\nimport LazyLoad from \"react-lazyload\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { LightBox } from \"../components/lightBox\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nconst colors = [\n \"red\",\n \"orange\",\n \"yellow\",\n \"olive\",\n \"green\",\n \"teal\",\n \"blue\",\n \"violet\",\n \"purple\",\n \"pink\",\n \"brown\",\n \"grey\",\n \"black\"\n];\n\nexport class AlbumLocationMap extends Component {\n render() {\n var photosWithGPS = this.props.photos.filter(function(photo) {\n if (photo.exif_gps_lon !== null && photo.exif_gps_lon) {\n return true;\n } else {\n return false;\n }\n });\n\n var sum_lat = 0;\n var sum_lon = 0;\n for (var i = 0; i < photosWithGPS.length; i++) {\n sum_lat += parseFloat(photosWithGPS[i].exif_gps_lat);\n sum_lon += parseFloat(photosWithGPS[i].exif_gps_lon);\n }\n var avg_lat = sum_lat / photosWithGPS.length;\n var avg_lon = sum_lon / photosWithGPS.length;\n\n var markers = photosWithGPS.map(function(photo, idx) {\n return (\n \n );\n });\n if (photosWithGPS.length > 0) {\n return (\n
\n \n OpenStreetMap contributors\"\n url=\"http://{s}.tile.osm.org/{z}/{x}/{y}.png\"\n />\n {markers}\n \n
\n );\n } else {\n return
;\n }\n }\n}\n\n/*******************************************************************************\nAUTO GENERATED EVENT ALBUM\n*******************************************************************************/\n\nexport class AlbumAutoGalleryView extends Component {\n state = {\n idx2hash: [],\n lightboxImageIndex: 0,\n lightboxShow: false,\n headerHeight: 80,\n width: window.innerWidth,\n height: window.innerHeight,\n showMap: false,\n entrySquareSize: 200,\n gridHeight: window.innerHeight - topMenuHeight - 60\n };\n\n constructor(props) {\n super(props);\n this.onPhotoClick = this.onPhotoClick.bind(this);\n }\n\n componentWillMount() {\n this.props.dispatch(\n fetchAlbumsAutoGalleries(this.props.match.params.albumID)\n );\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 6;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 8;\n } else {\n var numEntrySquaresPerRow = 10;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 20;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n // componentWillReceiveProps(nextProps){\n // console.log('componen receiving props')\n // var albumID = nextProps.match.params.albumID\n // if (nextProps.albumsAutoGalleries.hasOwnProperty(albumID) && !nextProps.fetchingAlbumsAutoGalleries && this.state.idx2hash.length==0) {\n // var album = nextProps.albumsAutoGalleries[nextProps.match.params.albumID]\n // var photos = _.sortBy(album.photos,'exif_timestamp')\n // var idx2hash = album.photos.map((el)=>el.image_hash)\n // console.log(idx2hash)\n // this.setState({idx2hash:idx2hash})\n // }\n // }\n\n onPhotoClick(image_hash) {\n // var album = this.props.albumsAutoGalleries[this.props.match.params.albumID]\n // var photos = _.sortBy(album.photos,'exif_timestamp')\n\n // // if (this.state.idx2hash.length != this.props.albumsAutoGalleries[this.props.match.params.albumID].photos.length) {\n // if (this.state.idx2hash.length == 0) {\n // this.setState({idx2hash:this.props.albumsAutoGalleries[this.props.match.params.albumID].photos.map((el)=>el.image_hash)})\n // }\n this.setState({\n lightboxImageIndex: this.state.idx2hash.indexOf(image_hash),\n lightboxShow: true\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var photoIndex = rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (\n photoIndex <\n this.props.albumsAutoGalleries[this.props.match.params.albumID].photos\n .length\n ) {\n var image_hash = this.props.albumsAutoGalleries[\n this.props.match.params.albumID\n ].photos[photoIndex].image_hash;\n return (\n
\n {\n this.onPhotoClick(photoIndex);\n // this.props.dispatch(push(`/person/${this.props.albumsPlace[this.props.match.params.albumID][photoIndex].key}`))\n }}\n >\n \n
\n
\n );\n } else {\n return
;\n }\n };\n\n getPhotoDetails(image_hash) {\n if (!this.props.photoDetails.hasOwnProperty(image_hash)) {\n this.props.dispatch(fetchPhotoDetail(image_hash));\n }\n }\n\n render() {\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n var albumID = this.props.match.params.albumID;\n if (\n this.props.albumsAutoGalleries.hasOwnProperty(albumID) &&\n !this.props.fetchingAlbumsAutoGalleries\n ) {\n var album = this.props.albumsAutoGalleries[\n this.props.match.params.albumID\n ];\n var photos = _.sortBy(album.photos, \"exif_timestamp\").map((el, idx) => {\n return { ...el, idx: idx };\n });\n var idx2hash = _\n .sortBy(album.photos, \"exif_timestamp\")\n .map((el, idx) => el.image_hash);\n var byDate = _.groupBy(\n _.sortBy(photos, \"exif_timestamp\"),\n photo => photo.exif_timestamp.split(\"T\")[0]\n );\n return (\n
\n
\n
\n \n \n {album.title}\n \n {album.photos.length} Photos
\n {\" \"}\n \n {moment(album.photos[0].exif_timestamp).format(\n \"MMMM Do YYYY\"\n )}\n {\" \"}\n -\n \n {moment(\n album.photos[album.photos.length - 1].exif_timestamp\n ).format(\" MMMM Do YYYY\")}\n \n \n \n
\n
\n\n \n {\n this.setState({\n showMap: !this.state.showMap\n });\n }}\n floated=\"right\"\n >\n \n {this.state.showMap ? \"Hide Maps\" : \"Show Maps\"}\n \n
\n\n
\n\n {this.state.lightboxShow && (\n this.setState({ lightboxShow: false })}\n onImageLoad={() => {\n this.getPhotoDetails(idx2hash[this.state.lightboxImageIndex]);\n }}\n onMovePrevRequest={() => {\n var nextIndex =\n (this.state.lightboxImageIndex + idx2hash.length - 1) %\n idx2hash.length;\n this.setState({\n lightboxImageIndex: nextIndex\n });\n this.getPhotoDetails(idx2hash[nextIndex]);\n }}\n onMoveNextRequest={() => {\n var nextIndex =\n (this.state.lightboxImageIndex + idx2hash.length + 1) %\n idx2hash.length;\n this.setState({\n lightboxImageIndex: nextIndex\n });\n this.getPhotoDetails(idx2hash[nextIndex]);\n }}\n />\n )}\n \n );\n } else {\n return (\n
\n \n \n \n
\n );\n }\n }\n}\n\nAlbumAutoGalleryView = connect(store => {\n return {\n fetchingAlbumsAutoGalleries: store.albums.fetchingAlbumsAutoGalleries,\n fetchedAlbumsAutoGalleries: store.albums.fetchedAlbumsAutoGalleries,\n albumsAutoGalleries: store.albums.albumsAutoGalleries,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail\n };\n})(AlbumAutoGalleryView);\n\n/*\n\nexport class AlbumAutoGalleryView extends Component {\n componentWillMount() {\n this.props.dispatch(fetchAlbumsAutoGalleries(this.props.match.params.albumID))\n }\n\n render() {\n console.log(this.props)\n var albumID = this.props.match.params.albumID\n console.log('property exists',this.props.albumsAutoGalleries.hasOwnProperty(albumID))\n console.log('the property',this.props.albumsAutoGalleries[albumID])\n if (this.props.albumsAutoGalleries.hasOwnProperty(albumID) && !this.props.fetchingAlbumsAutoGalleries) {\n var mappedRenderablePhotoArray = this.props.albumsAutoGalleries[albumID].photos.map(function(photo){\n return ({\n src: serverAddress+photo.image_url,\n thumbnail: serverAddress+photo.thumbnail_url,\n thumbnailWidth:photo.thumbnail_width,\n thumbnailHeight:photo.thumbnail_height,\n });\n });\n\n var mappedPeopleIcons = this.props.albumsAutoGalleries[albumID].people.map(function(person){\n return (\n \n )\n })\n\n var renderable = (\n
\n \n\n
\n \n {this.props.albumsAutoGalleries[albumID].title}\n {this.props.albumsAutoGalleries[albumID].photos.length} Photos\n {mappedPeopleIcons}\n \n
\n\n\n\n \n \n
\n )\n }\n else {\n var renderable = (\n
\n \n \n \n
\n )\n }\n return (\n
\n {renderable}\n
\n )\n }\n}\n\n*/\n" }, { "path": "src/layouts/albumAutoMonths.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchAutoAlbumsList} from '../actions/albumsActions'\nimport {AlbumAutoCard, AlbumAutoCardPlain, AlbumAutoCardPlainPlaceholder, AlbumAutoGallery} from '../components/album'\nimport {Container, Icon, Header, Button, Card, Label, Popup, Divider} from 'semantic-ui-react'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\n\n\nexport class AlbumAutoMonthCards extends Component {\n render() {\n\n var match = this.props.match\n var month = this.props.month\n var mappedAlbumCards = this.props.albums.map(function(album){\n var albumTitle = album.title\n var albumDate = album.timestamp.split('T')[0]\n try {\n var albumCoverURL = album.cover_photo_url\n }\n catch(err) {\n console.log(err)\n var albumCoverURL = null\n }\n return (\n }>\n \n \n )\n })\n\n\n return (\n
\n
\n \n {this.props.month}\n {this.props.albums.length} Events\n \n
\n
\n \n {mappedAlbumCards}\n \n
\n
\n )\n }\n}\n\n\n\nexport class AlbumAutoMonths extends Component {\n constructor(props){\n super(props)\n this.groupEventsByMonth.bind(this)\n }\n\n componentWillMount() {\n this.props.dispatch(fetchAutoAlbumsList())\n var _dispatch = this.props.dispatch\n /*\n var intervalId = setInterval(function(){\n _dispatch(fetchPhotoScanStatus())\n _dispatch(fetchAutoAlbumProcessingStatus())\n },2000\n )\n this.setState({intervalId:intervalId})\n */\n }\n\n componentWillUnmount() {\n //clearInterval(this.state.intervalId)\n }\n\n shouldComponentUpdate(nextProps, nextState){\n console.log('should component update?')\n if (nextProps.albumsAutoList === this.props.albumsAutoList) {\n console.log('no')\n return false\n }\n else {\n console.log('yes')\n return true\n }\n }\n\n\n handleAutoAlbumGen = e => this.props.dispatch(generateAutoAlbums())\n\n groupEventsByMonth() {\n var allMonths = this.props.albumsAutoList.map(function(album){\n var yearMonthDate = album.timestamp.split('T')[0]\n var yearMonth = yearMonthDate.split('-').slice(0,2).join('-')\n return yearMonth\n })\n\n var months = new Set(allMonths)\n months = [...months]\n var eventsByMonth = {}\n months.map(function(month){\n eventsByMonth[month] = []\n })\n this.props.albumsAutoList.map(function(album){\n var yearMonthDate = album.timestamp.split('T')[0]\n var yearMonth = yearMonthDate.split('-').slice(0,2).join('-')\n eventsByMonth[yearMonth].push(album)\n })\n console.log(eventsByMonth)\n return eventsByMonth\n }\n\n render() {\n var eventsByMonth = this.groupEventsByMonth()\n if (this.props.fetchedAlbumsAutoList) {\n var match = this.props.match\n var eventsByMonthCardGroups = []\n for (var month in eventsByMonth) {\n if (eventsByMonth.hasOwnProperty(month)) {\n var cardsMonth = (\n \n )\n eventsByMonthCardGroups.push(cardsMonth)\n }\n }\n console.log(eventsByMonthCardGroups)\n\n\n }\n else {\n var eventsByMonthCardGroups = null\n }\n\n\n return (\n \n\n {eventsByMonthCardGroups}\n \n )\n }\n}\n\n\n\n\n\nAlbumAutoMonths = connect((store)=>{\n return {\n albumsAuto: store.albums.albumsAuto,\n fetchingAlbumsAuto: store.albums.fetchingAlbumsAuto,\n fetchedAlbumsAuto: store.albums.fetchedAlbumsAuto,\n \n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos,\n\n }\n})(AlbumAutoMonths)\n" }, { "path": "src/layouts/albumAutoRV.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n fetchPeopleAlbums,\n fetchAutoAlbums,\n fetchAutoAlbumsList\n} from \"../actions/albumsActions\";\nimport { AlbumAutoCard, AlbumAutoGallery } from \"../components/album\";\nimport {\n Container,\n Icon,\n Header,\n Image,\n Button,\n Card,\n Label,\n Popup,\n Rating,\n Loader\n} from \"semantic-ui-react\";\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport * as moment from \"moment\";\nimport debounce from \"lodash/debounce\";\nimport { push } from \"react-router-redux\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nvar topMenuHeight = 45; // don't change this\nvar leftMenuWidth = 85; // don't change this\nvar SIDEBAR_WIDTH = 85;\nvar timelineScrollWidth = 0;\nvar DAY_HEADER_HEIGHT = 35;\n\nclass ScrollSpeed {\n clear = () => {\n this.lastPosition = null;\n this.delta = 0;\n };\n getScrollSpeed(scrollOffset) {\n if (this.lastPosition != null) {\n this.delta = scrollOffset - this.lastPosition;\n }\n this.lastPosition = scrollOffset;\n\n window.clearTimeout(this._timeout);\n this._timeout = window.setTimeout(this.clear, 50);\n\n return this.delta;\n }\n}\n\nconst SPEED_THRESHOLD = 1000; // Tweak this to whatever feels right for your app\nconst SCROLL_DEBOUNCE_DURATION = 100; // In milliseconds\n\nexport class AlbumAutoRV extends Component {\n constructor(props) {\n super(props);\n this.cellRenderer = this.cellRenderer.bind(this);\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.state = {\n scrollToIndex: undefined,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200,\n currTopRenderedCellIdx: 0,\n isScrollingFast: false\n };\n }\n getScrollSpeed = new ScrollSpeed().getScrollSpeed;\n\n handleScroll = ({ scrollTop }) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(this.getScrollSpeed(scrollTop));\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop: scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n };\n\n handleScrollEnd = debounce(() => {\n const { isScrollingFast } = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n componentWillMount() {\n this.props.dispatch(fetchAutoAlbumsList());\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 400) {\n var numEntrySquaresPerRow = 1;\n } else if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n console.log(\"column width:\", columnWidth);\n console.log(\"item size:\", entrySquareSize);\n console.log(\"num items per row\", numEntrySquaresPerRow);\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n const { isScrollingFast } = this.state;\n\n var albumAutoIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumAutoIndex < this.props.albumsAutoList.length) {\n if (!isScrollingFast) {\n var image = (\n \n );\n } else {\n var image = (\n \n );\n }\n\n return (\n
\n
\n \n {image}\n \n \n {moment(\n this.props.albumsAutoList[albumAutoIndex].timestamp\n ).format(\"MMMM YYYY\")}\n \n \n {this.props.albumsAutoList[albumAutoIndex].photos.length}{\" \"}\n Items\n \n \n {this.props.albumsAutoList[albumAutoIndex].title}\n \n \n \n
\n
\n );\n } else {\n return
;\n }\n };\n\n render() {\n return (\n
\n
\n
\n \n \n Events{\" \"}\n \n \n {this.props.albumsAutoList.length} Events\n \n \n
\n
\n\n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n\nAlbumAutoRV = connect(store => {\n return {\n albumsAuto: store.albums.albumsAuto,\n fetchingAlbumsAuto: store.albums.fetchingAlbumsAuto,\n fetchedAlbumsAuto: store.albums.fetchedAlbumsAuto,\n\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos\n };\n})(AlbumAutoRV);\n" }, { "path": "src/layouts/albumDateGalleryView.js", "content": "import React, {Component} from 'react';\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer,\n Container, Label, Popup, Segment, Button, Icon} from 'semantic-ui-react';\nimport Gallery from 'react-grid-gallery'\nimport VisibilitySensor from 'react-visibility-sensor'\nimport { connect } from \"react-redux\";\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchAlbumsDateGalleries} from '../actions/albumsActions'\nimport { Map, TileLayer, Marker } from 'react-leaflet'\nimport {Server, serverAddress} from '../api_client/apiClient'\n\n\n/*******************************************************************************\nCOMMON\n*******************************************************************************/\n\n\nexport class AlbumLocationMap extends Component {\n render() {\n var photosWithGPS = this.props.photos.filter(function(photo){\n if (photo.exif_gps_lon !== null && photo.exif_gps_lon){\n return true\n }\n else {\n return false\n }\n })\n \n var sum_lat = 0\n var sum_lon = 0\n for (var i=0;i\n \n )\n })\n console.log(markers)\n\n if (photosWithGPS.length>0){\n return (\n
\n \n \n {markers}\n \n \n
\n )\n }\n else {\n return (\n
\n )\n }\n }\n}\n\n/*******************************************************************************\nAUTO GENERATED EVENT ALBUM\n*******************************************************************************/\n\nexport class AlbumDateGalleryView extends Component {\n componentWillMount() {\n this.props.dispatch(fetchAlbumsDateGalleries(this.props.match.params.albumID))\n }\n\n render() {\n console.log(this.props)\n var albumID = this.props.match.params.albumID\n console.log('property exists',this.props.albumsDateGalleries.hasOwnProperty(albumID))\n console.log('the property',this.props.albumsDateGalleries[albumID])\n if (this.props.albumsDateGalleries.hasOwnProperty(albumID) && !this.props.fetchingAlbumsDateGalleries) {\n console.log('here!')\n console.log(this.props.albumsDateGalleries[albumID].photos)\n var mappedRenderablePhotoArray = this.props.albumsDateGalleries[albumID].photos.map(function(photo){\n return ({\n src: serverAddress+photo.image_url,\n thumbnail: serverAddress+photo.thumbnail_url,\n thumbnailWidth:photo.thumbnail_width,\n thumbnailHeight:photo.thumbnail_height,\n });\n });\n\n var renderable = (\n
\n \n\n
\n \n {this.props.albumsDateGalleries[albumID].date}\n {this.props.albumsDateGalleries[albumID].photos.length} Photos\n \n
\n\n\n\n \n \n
\n )\n }\n else {\n var renderable = (\n
\n \n \n \n
\n )\n }\n return (\n
\n {renderable}\n
\n )\n }\n}\n\n\n\nAlbumDateGalleryView = connect((store)=>{\n return {\n fetchingAlbumsDateGalleries: store.albums.fetchingAlbumsDateGalleries,\n fetchedAlbumsDateGalleries: store.albums.fetchedAlbumsDateGalleries,\n albumsDateGalleries: store.albums.albumsDateGalleries,\n }\n})(AlbumDateGalleryView)\n\n" }, { "path": "src/layouts/albumDateMonths.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchDateAlbumsList} from '../actions/albumsActions'\nimport {AlbumDateCard, AlbumDateCardPlaceholder, AlbumDateCardPlain, AlbumDateCardPlainPlaceholder, AlbumAutoGallery} from '../components/album'\nimport {Container, Icon, Header, Button, Card, Label, Popup, Divider} from 'semantic-ui-react'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\n\n\nexport class AlbumDateMonthCards extends Component {\n render() {\n\n var match = this.props.match\n var month = this.props.month\n var mappedAlbumCards = this.props.albums.map(function(album){\n var albumTitle = album.title\n var albumDate = album.date\n try {\n var albumCoverURL = album.cover_photo_url\n }\n catch(err) {\n console.log(err)\n var albumCoverURL = null\n }\n return (\n }> \n \n \n )\n })\n\n\n return (\n
\n
\n \n {this.props.month}\n {this.props.albums.length} Days\n \n
\n
\n \n {mappedAlbumCards}\n \n
\n
\n )\n }\n}\n\n\n\nexport class AlbumDateMonths extends Component {\n constructor(props){\n super(props)\n this.groupDatesByMonth.bind(this)\n }\n\n componentWillMount() {\n this.props.dispatch(fetchDateAlbumsList())\n\n }\n\n shouldComponentUpdate(nextProps, nextState){\n console.log('should component update?')\n if (nextProps.albumsDateList === this.props.albumsDateList) {\n console.log('no')\n return false\n }\n else {\n console.log('yes')\n return true\n }\n }\n\n groupDatesByMonth() {\n var allMonths = this.props.albumsDateList.map(function(album){\n var yearMonth = album.date.split('-').slice(0,2).join('-')\n return yearMonth\n })\n\n var months = new Set(allMonths)\n months = [...months]\n var eventsByMonth = {}\n months.map(function(month){\n eventsByMonth[month] = []\n })\n this.props.albumsDateList.map(function(album){\n var yearMonth = album.date.split('-').slice(0,2).join('-')\n eventsByMonth[yearMonth].push(album)\n })\n console.log(eventsByMonth)\n return eventsByMonth\n }\n\n render() {\n if (this.props.fetchedAlbumsDateList) {\n var eventsByMonth = this.groupDatesByMonth()\n var match = this.props.match\n var datesByMonthCardGroups = []\n for (var month in eventsByMonth) {\n if (eventsByMonth.hasOwnProperty(month)) {\n var cardsMonth = (\n \n )\n datesByMonthCardGroups.push(cardsMonth)\n }\n }\n console.log(datesByMonthCardGroups)\n\n\n }\n else {\n var datesByMonthCardGroups = null\n }\n\n\n return (\n
\n {datesByMonthCardGroups}\n
\n )\n }\n}\n\n\n\n\n\nAlbumDateMonths = connect((store)=>{\n return {\n albumsDateList: store.albums.albumsDateList,\n fetchingAlbumsDateList: store.albums.fetchingAlbumsDateList,\n fetchedAlbumsDateList: store.albums.fetchedAlbumsDateList,\n }\n})(AlbumDateMonths)\n" }, { "path": "src/layouts/albumPeople.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n fetchPeopleAlbums,\n fetchAutoAlbums,\n generateAutoAlbums\n} from \"../actions/albumsActions\";\nimport { AlbumPeopleCard, AlbumPeopleGallery } from \"../components/album\";\nimport {\n Popup,\n Modal,\n Container,\n Icon,\n Divider,\n Header,\n Image,\n Loader,\n Button,\n Card\n} from \"semantic-ui-react\";\nimport { fetchPeople, deletePerson } from \"../actions/peopleActions\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nimport { push } from \"react-router-redux\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumPeople extends Component {\n constructor(props) {\n super(props);\n\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.cellRenderer = this.cellRenderer.bind(this);\n }\n\n state = {\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200\n };\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize);\n if (this.props.people.length === 0) {\n this.props.dispatch(fetchPeople());\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.calculateEntrySquareSize);\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var albumPersonIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumPersonIndex < this.props.people.length) {\n return (\n
\n {\n if (\n !this.props.albumsPeople.hasOwnProperty(\n this.props.people[albumPersonIndex].key\n )\n ) {\n this.props.dispatch(\n fetchPeopleAlbums(this.props.people[albumPersonIndex].key)\n );\n }\n // this.props.dispatch(push(`/person/${this.props.people[albumPersonIndex].key}`))\n }}\n style={{ padding: 5 }}\n >\n {this.props.people[albumPersonIndex].face_count > 0 ? (\n this.props.people[albumPersonIndex].text === \"unknown\" ? (\n \n ) : (\n \n )\n ) : (\n \n )}\n
\n \n {this.props.people[albumPersonIndex].text}
\n {this.props.people[albumPersonIndex].face_count} Photos\n {this.props.people[albumPersonIndex].text.toLowerCase() !=\n \"unknown\" && (\n \n }\n content={\n
\n Are you sure you want to delete{\" \"}\n {this.props.people[albumPersonIndex].text}?
\n This action cannot be undone!
\n All the faces associated with this person will be tagged{\" \"}\n unknown.\n \n
\n \n this.props.dispatch(\n deletePerson(\n this.props.people[albumPersonIndex].key\n )\n )\n }\n negative\n >\n Yes\n \n
\n
\n }\n on=\"click\"\n position=\"bottom center\"\n />\n
\n )}\n \n \n );\n } else {\n return
;\n }\n };\n\n render() {\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n return (\n
\n
\n
\n \n \n People{\" \"}\n \n \n {this.props.people.length} People\n \n \n
\n
\n\n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n\nAlbumPeople = connect(store => {\n return {\n albumsPeople: store.albums.albumsPeople,\n fetchingAlbumsPeople: store.albums.fetchingAlbumsPeople,\n fetchedAlbumsPeople: store.albums.fetchedAlbumsPeople,\n people: store.people.people,\n fetchedPeople: store.people.fetched,\n fetchingPeople: store.people.fetching\n };\n})(AlbumPeople);\n" }, { "path": "src/layouts/albumPersonGallery.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {Container, Icon, Divider, Header, Image, Button, Card, Loader} from 'semantic-ui-react'\nimport { fetchPeople, fetchEgoGraph } from '../actions/peopleActions';\nimport { fetchPhotoDetail, fetchNoTimestampPhotoList} from '../actions/photosActions';\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport { Grid, List, WindowScroller,AutoSizer } from 'react-virtualized';\nimport {EgoGraph} from '../components/egoGraph'\nimport { push } from 'react-router-redux'\nimport {LightBox} from '../components/lightBox'\nimport moment from 'moment'\nimport _ from 'lodash'\nimport debounce from 'lodash/debounce'\n\n\nimport {calculateGridCells, calculateGridCellSize} from '../util/gridUtils'\nimport {ScrollSpeed, SPEED_THRESHOLD, SCROLL_DEBOUNCE_DURATION} from '../util/scrollUtils'\n\nimport {PhotoListView} from './ReusablePhotoListView'\n\n\nvar topMenuHeight = 55 // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\nvar DAY_HEADER_HEIGHT = 70\nvar leftMenuWidth = 85 // don't change this\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumPersonGallery extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n }\n\n componentDidMount() {\n if (this.props.people.length === 0){\n this.props.dispatch(fetchPeopleAlbums(this.props.match.params.albumID))\n }\n }\n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPeople.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPeople[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length !== photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment.utc(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var t1 = performance.now();\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n\n\n\n render() {\n const {albumsPeople,fetchingAlbumsPeople,fetchedAlbumsPeople,fetchingPeople} = this.props\n return (\n \n ) \n }\n}\n\n/*\nexport class AlbumPersonGallery extends Component {\n\n constructor() {\n super();\n this.listRef = React.createRef()\n this.handleResize = this.handleResize.bind(this)\n this.cellRenderer = this.cellRenderer.bind(this)\n this.onPhotoClick = this.onPhotoClick.bind(this)\n this.state = {\n photosGroupedByDate: [],\n cellContents: [[]],\n hash2row: {},\n idx2hash: [],\n lightboxImageIndex: 1,\n lightboxShow:false,\n lightboxSidebarShow:false,\n scrollToIndex: undefined,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200,\n numEntrySquaresPerRow:3,\n currTopRenderedRowIdx:0,\n scrollTop:0,\n gridHeight: window.innerHeight- topMenuHeight - 60,\n showGraph:false,\n }\n }\n\n\n scrollSpeedHandler = new ScrollSpeed()\n\n handleScroll = ({scrollTop}) => {\n // scrollSpeed represents the number of pixels scrolled since the last scroll event was fired\n const scrollSpeed = Math.abs(this.scrollSpeedHandler.getScrollSpeed(scrollTop));\n\n if (scrollSpeed >= SPEED_THRESHOLD) {\n this.setState({\n isScrollingFast: true,\n scrollTop:scrollTop\n });\n }\n\n // Since this method is debounced, it will only fire once scrolling has stopped for the duration of SCROLL_DEBOUNCE_DURATION\n this.handleScrollEnd();\n }\n\n handleScrollEnd = debounce(() => {\n const {isScrollingFast} = this.state;\n\n if (isScrollingFast) {\n this.setState({\n isScrollingFast: false,\n });\n }\n }, SCROLL_DEBOUNCE_DURATION);\n\n\n\n\n componentDidMount() {\n this.handleResize();\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n if (this.props.people.length == 0){\n this.props.dispatch(fetchPeopleAlbums(this.props.match.params.albumID))\n }\n this.props.dispatch(fetchEgoGraph(this.props.match.params.albumID))\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize.bind(this))\n }\n\n\n handleResize() {\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 10\n const {entrySquareSize,numEntrySquaresPerRow} = calculateGridCellSize(columnWidth)\n var {cellContents,hash2row} = calculateGridCells(this.state.photosGroupedByDate,numEntrySquaresPerRow)\n\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow,\n cellContents: cellContents,\n hash2row: hash2row\n })\n if (this.listRef.current) {\n this.listRef.current.recomputeGridSize()\n }\n }\n\n onPhotoClick(hash) {\n this.setState({lightboxImageIndex:this.state.idx2hash.indexOf(hash),lightboxShow:true})\n }\n\n \n\n\n\n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPeople.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPeople[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length != photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n\n \n var {cellContents,hash2row} = calculateGridCells(groupedByDateList,prevState.numEntrySquaresPerRow)\n console.log(cellContents)\n var t1 = performance.now();\n console.log(t1-t0)\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n cellContents: cellContents,\n hash2row:hash2row\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n\n\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n if (this.state.cellContents[rowIndex][columnIndex]) { // non-empty cell\n const cell = this.state.cellContents[rowIndex][columnIndex]\n if (cell.date) { // header cell has 'date' attribute\n return ( \n
\n
\n
\n \n \n { cell.date=='No Timestamp' ? \"No Timestamp\" : moment(cell.date).format(\"MMM Do YYYY, dddd\")}\n \n {cell.photos.length} Photos\n \n \n
\n
\n
\n ) \n \n // if (!this.state.isScrollingFast){\n // } else {\n // return (\n //
\n //
\n // ) \n // } \n \n } else { // photo cell doesn't have 'date' attribute\n if (!this.state.isScrollingFast) {\n return (\n
\n {\n this.onPhotoClick(cell.image_hash)\n }}\n height={this.state.entrySquareSize} \n width={this.state.entrySquareSize} \n src={serverAddress+'/media/square_thumbnails/'+cell.image_hash+'.jpg'}/>\n
\n )\n } else {\n return (\n
\n
\n )\n }\n\n }\n\n } else { // empty cell\n return (\n
\n
\n )\n }\n }\n\n\n \n getPhotoDetails(image_hash) {\n if (!this.props.photoDetails.hasOwnProperty(image_hash)) {\n this.props.dispatch(fetchPhotoDetail(image_hash))\n }\n }\n\n render() {\n if (this.props.albumsPeople.hasOwnProperty(this.props.match.params.albumID)) {\n var totalListHeight = this.state.cellContents.map((row,index)=>{\n if (row[0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }).reduce((a,b)=>(a+b),0)\n\t return (\n\t
\n\n
\n\n
\n\n\n\n\t \t
\n\n\n
\n \n \n {this.props.albumsPeople[this.props.match.params.albumID].name + \" \"}\n
\n\n\n {this.state.showGraph && }\n\n\n\t \t
\n\n\n \n {({width}) => (\n {\n var date = this.state.cellContents[rowStartIndex][0].date\n if (date) {\n if (date=='No Timestamp') {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:date,\n fromNow:date\n })\n } else {\n this.setState({\n currTopRenderedRowIdx:rowStartIndex,\n date:moment(date).format(\"MMMM Do YYYY\"),\n fromNow:moment(date).fromNow()\n })\n }\n }\n }}\n overscanRowCount={5}\n style={{outline:'none'}}\n cellRenderer={this.cellRenderer}\n onScroll={this.handleScroll}\n columnWidth={this.state.entrySquareSize}\n columnCount={this.state.numEntrySquaresPerRow}\n height={this.state.height- topMenuHeight - 60}\n estimatedRowSize={totalListHeight/this.state.cellContents.length.toFixed(1)}\n rowHeight={({index})=> {\n if (this.state.cellContents[index][0].date) { //header row\n return DAY_HEADER_HEIGHT\n } else { //photo row\n return this.state.entrySquareSize\n }\n }}\n rowCount={this.state.cellContents.length}\n width={width}\n />\n )}\n \n\n { this.state.cellContents[this.state.currTopRenderedRowIdx][0] && (\n
\n
\n {this.state.date}
\n
\n
\n {this.state.fromNow}\n
\n
\n )}\n\n\n { this.state.lightboxShow &&\n this.setState({ lightboxShow: false })}\n onImageLoad={()=>{\n this.getPhotoDetails(this.state.idx2hash[this.state.lightboxImageIndex])\n }}\n onMovePrevRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length - 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}\n onMoveNextRequest={() => {\n var nextIndex = (this.state.lightboxImageIndex + this.state.idx2hash.length + 1) % this.state.idx2hash.length\n this.setState({\n lightboxImageIndex:nextIndex\n })\n var rowIdx = this.state.hash2row[this.state.idx2hash[nextIndex]]\n this.listRef.current.scrollToCell({columnIndex:0,rowIndex:rowIdx})\n this.getPhotoDetails(this.state.idx2hash[nextIndex])\n }}/>\n }\n\n\t\t\t\t
\n\t )\n }\n else {\n \treturn (\n \t\t
\n \t)\n }\n }\n}\n*/\n\nAlbumPersonGallery = connect((store)=>{\n return {\n albumsPeople: store.albums.albumsPeople,\n fetchingAlbumsPeople: store.albums.fetchingAlbumsPeople,\n fetchedAlbumsPeople: store.albums.fetchedAlbumsPeople,\n people: store.people.people,\n fetchedPeople: store.people.fetched,\n fetchingPeople: store.people.fetching,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n }\n})(AlbumPersonGallery)\n" }, { "path": "src/layouts/albumPlace.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n AlbumDateCard,\n AlbumDateCardPlaceholder,\n AlbumDateCardPlain,\n AlbumDateCardPlainPlaceholder,\n AlbumAutoGallery\n} from \"../components/album\";\nimport {\n Container,\n Icon,\n Dropdown,\n Header,\n Button,\n Card,\n Loader,\n Label,\n Popup,\n Image,\n Flag,\n Divider,\n Grid as GridSUI\n} from \"semantic-ui-react\";\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport LazyLoad from \"react-lazyload\";\nimport { AlbumAutoMonths } from \"./albumAutoMonths\";\nimport { AlbumDateMonths } from \"./albumDateMonths\";\n\nimport { fetchPlaceAlbumsList } from \"../actions/albumsActions\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport { push } from \"react-router-redux\";\nimport store from \"../store\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { AllPhotosMap, EventMap, LocationClusterMap } from \"../components/maps\";\nimport CountryPiChart from \"../components/charts/countryPiChart\";\nimport WordCloud from \"../components/charts/wordCloud\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nimport { countryNames } from \"../util/countryNames\";\nimport _ from \"lodash\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumPlace extends Component {\n constructor() {\n super();\n this.state = {\n geolocationLevel: 1,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200,\n showMap: false,\n gridHeight: window.innerHeight - topMenuHeight - 60,\n headerHeight: 60\n };\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.cellRenderer = this.cellRenderer.bind(this);\n }\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize);\n if (this.props.albumsPlaceList.length === 0) {\n this.props.dispatch(fetchPlaceAlbumsList());\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.calculateEntrySquareSize);\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n ...this.state,\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var place = this.props.albumsPlaceListGroupedByGeolocationLevel[\n this.state.geolocationLevel\n ];\n var albumPlaceIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumPlaceIndex < place.length) {\n return (\n
\n {\n // store.dispatch(push(`/place/${this.props.albumsPlaceList[albumPlaceIndex].id}/`))\n // store.dispatch(searchPhotos(this.props.albumsPlaceList[albumPlaceIndex].title))\n // store.dispatch(push('/search'))\n }}\n style={{ padding: 5 }}\n >\n {place[albumPlaceIndex].cover_photos.slice(0, 1).map(photo => {\n return (\n \n );\n })}\n
\n
\n {countryNames.includes(\n place[albumPlaceIndex].title.toLowerCase()\n ) ? (\n \n ) : (\n \"\"\n )}\n {place[albumPlaceIndex].title}\n
{place[albumPlaceIndex].photo_count} Photos\n
\n
\n );\n } else {\n return
;\n }\n };\n\n render() {\n var album = this.props.albumsPlaceListGroupedByGeolocationLevel[\n this.state.geolocationLevel\n ];\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n var geolocationLevelOptions = _\n .keys(this.props.albumsPlaceListGroupedByGeolocationLevel)\n .map(el => ({ key: el, value: el, text: \"Location Level \" + `${el}` }));\n return (\n
\n \n \n this.setState({ geolocationLevel: value })\n }\n defaultValue={\"1\"}\n options={geolocationLevelOptions}\n />\n\n {\n this.setState({\n showMap: !this.state.showMap,\n gridHeight: !this.state.showMap\n ? this.state.height - topMenuHeight - 260\n : this.state.height - topMenuHeight - 60,\n headerHeight: !this.state.showMap ? 260 : 60\n });\n }}\n floated=\"right\"\n >\n \n {this.state.showMap ? \"Hide Map\" : \"Show Map\"}\n \n
\n\n \n
\n \n \n Places{\" \"}\n \n \n Showing top {this.props.albumsPlaceList.length} places\n \n \n
\n\n {this.state.showMap && }\n
\n {album ? (\n \n {({ width }) => (\n \n )}\n \n ) : (\n
\n )}\n
\n );\n }\n}\n\nexport class EntrySquare extends Component {\n render() {\n var images = this.props.coverPhotoUrls.map(function(coverPhotoUrl) {\n return (\n \n );\n }, this);\n return (\n {\n store.dispatch(searchPhotos(this.props.title));\n store.dispatch(push(\"/search\"));\n }}\n >\n
\n \n {images}\n \n
\n
\n {this.props.title} ({this.props.photoCount})\n
\n \n );\n }\n}\n\nAlbumPlace = connect(store => {\n return {\n albumsPlaceList: store.albums.albumsPlaceList,\n albumsPlaceListGroupedByGeolocationLevel:\n store.albums.albumsPlaceListGroupedByGeolocationLevel,\n fetchingAlbumsPlaceList: store.albums.fetchingAlbumsPlaceList,\n fetchedAlbumsPlaceList: store.albums.fetchedAlbumsPlaceList\n };\n})(AlbumPlace);\n" }, { "path": "src/layouts/albumPlaceGallery.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPlaceAlbum, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {Container, Icon, Divider, Header, Image, Button, Flag, Card, Loader} from 'semantic-ui-react'\n\nimport { push } from 'react-router-redux'\n\nimport _ from 'lodash'\nimport moment from 'moment'\nimport {PhotoListView} from './ReusablePhotoListView'\n\n\nconst topMenuHeight = 55 // don't change this\nconst ESCAPE_KEY = 27;\nconst ENTER_KEY = 13;\nconst RIGHT_ARROW_KEY = 39;\nconst UP_ARROW_KEY = 38;\nconst LEFT_ARROW_KEY = 37;\nconst DOWN_ARROW_KEY = 40;\n\nconst SIDEBAR_WIDTH = 85;\n\nconst DAY_HEADER_HEIGHT = 70\nconst leftMenuWidth = 85 // don't change this\n\n\n\n\nexport class AlbumPlaceGallery extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n albumID: null,\n }\n \n componentDidMount() {\n this.props.dispatch(fetchPlaceAlbum(this.props.match.params.albumID))\n }\n\n\n\n \n \n \n static getDerivedStateFromProps(nextProps,prevState){\n if (nextProps.albumsPlace.hasOwnProperty(nextProps.match.params.albumID)){\n const photos = nextProps.albumsPlace[nextProps.match.params.albumID].photos\n if (prevState.idx2hash.length !== photos.length) {\n\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos,(el)=>{\n if (el.exif_timestamp) {\n return moment.utc(el.exif_timestamp).format('YYYY-MM-DD')\n } else {\n return \"No Timestamp\"\n }\n })\n var groupedByDateList = _.reverse(_.sortBy(_.toPairsIn(groupedByDate).map((el)=>{\n return {date:el[0],photos:el[1]}\n }),(el)=>el.date))\n var idx2hash = []\n groupedByDateList.forEach((g)=>{\n g.photos.forEach((p)=>{\n idx2hash.push(p.image_hash)\n })\n })\n var t1 = performance.now();\n return {\n ...prevState, \n photosGroupedByDate: groupedByDateList,\n idx2hash:idx2hash,\n albumID:nextProps.match.params.albumID\n }\n } else {\n return null\n }\n } else {\n return null\n }\n }\n \n \n \n render() {\n const {fetchingAlbumsPlace} = this.props\n return (\n \n ) \n }\n }\n\n\nAlbumPlaceGallery = connect((store)=>{\n return {\n albumsPlace: store.albums.albumsPlace,\n fetchingAlbumsPlace: store.albums.fetchingAlbumsPlace,\n fetchedAlbumsPlace: store.albums.fetchedAlbumsPlace,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n }\n})(AlbumPlaceGallery)\n" }, { "path": "src/layouts/albumThing.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n AlbumDateCard,\n AlbumDateCardPlaceholder,\n AlbumDateCardPlain,\n AlbumDateCardPlainPlaceholder,\n AlbumAutoGallery\n} from \"../components/album\";\nimport {\n Container,\n Icon,\n Header,\n Button,\n Card,\n Loader,\n Label,\n Popup,\n Image,\n Divider\n} from \"semantic-ui-react\";\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport LazyLoad from \"react-lazyload\";\nimport { AlbumAutoMonths } from \"./albumAutoMonths\";\nimport { AlbumDateMonths } from \"./albumDateMonths\";\n\nimport { fetchThingAlbumsList } from \"../actions/albumsActions\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport { push } from \"react-router-redux\";\nimport store from \"../store\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumThing extends Component {\n constructor() {\n super();\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200\n });\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.cellRenderer = this.cellRenderer.bind(this);\n }\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize);\n if (this.props.albumsThingList.length === 0) {\n this.props.dispatch(fetchThingAlbumsList());\n }\n }\n\n componentWillUnount() {\n window.removeEventListener(\"resize\", this.calculateEntrySquareSize);\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var albumThingIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumThingIndex < this.props.albumsThingList.length) {\n return (\n
\n {\n store.dispatch(\n searchPhotos(this.props.albumsThingList[albumThingIndex].title)\n );\n store.dispatch(push(\"/search\"));\n }}\n style={{ padding: 5 }}\n >\n {this.props.albumsThingList[albumThingIndex].cover_photos\n .slice(0, 1)\n .map(photo => {\n return (\n \n );\n })}\n
\n
\n \n {this.props.albumsThingList[albumThingIndex].title}\n
\n {this.props.albumsThingList[albumThingIndex].photo_count} Photos\n
\n \n );\n } else {\n return
;\n }\n };\n\n render() {\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n return (\n
\n
\n
\n \n \n Things{\" \"}\n \n \n Showing top {this.props.albumsThingList.length} things\n \n \n
\n
\n\n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n\nexport class EntrySquare extends Component {\n render() {\n var images = this.props.cover_photos.map(function(photo) {\n return (\n \n );\n }, this);\n return (\n {\n store.dispatch(searchPhotos(this.props.title));\n store.dispatch(push(\"/search\"));\n }}\n >\n
\n \n {images}\n \n
\n
\n {this.props.title} ({this.props.photoCount})\n
\n
\n );\n }\n}\n\nAlbumThing = connect(store => {\n return {\n albumsThingList: store.albums.albumsThingList,\n fetchingAlbumsThingList: store.albums.fetchingAlbumsThingList,\n fetchedAlbumsThingList: store.albums.fetchedAlbumsThingList\n };\n})(AlbumThing);\n" }, { "path": "src/layouts/albumUser.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n AlbumDateCard,\n AlbumDateCardPlaceholder,\n AlbumDateCardPlain,\n AlbumDateCardPlainPlaceholder,\n AlbumAutoGallery\n} from \"../components/album\";\nimport {\n Container,\n Icon,\n Header,\n Button,\n Card,\n Loader,\n Label,\n Popup,\n Image,\n Divider\n} from \"semantic-ui-react\";\nimport {\n fetchCountStats,\n fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus\n} from \"../actions/utilActions\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport LazyLoad from \"react-lazyload\";\nimport { AlbumAutoMonths } from \"./albumAutoMonths\";\nimport { AlbumDateMonths } from \"./albumDateMonths\";\n\nimport {\n fetchUserAlbumsList,\n fetchThingAlbumsList,\n deleteUserAlbum\n} from \"../actions/albumsActions\";\nimport { searchPhotos } from \"../actions/searchActions\";\nimport { push } from \"react-router-redux\";\nimport store from \"../store\";\nimport { Link } from \"react-router-dom\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class AlbumUser extends Component {\n constructor() {\n super();\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: 200\n });\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this);\n this.cellRenderer = this.cellRenderer.bind(this);\n }\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n if (this.props.albumsUserList.length === 0) {\n this.props.dispatch(fetchUserAlbumsList());\n }\n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2;\n } else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3;\n } else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4;\n } else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5;\n } else {\n var numEntrySquaresPerRow = 6;\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15;\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow;\n var numEntrySquaresPerRow = numEntrySquaresPerRow;\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n });\n }\n\n cellRenderer = ({ columnIndex, key, rowIndex, style }) => {\n var albumUserIndex =\n rowIndex * this.state.numEntrySquaresPerRow + columnIndex;\n if (albumUserIndex < this.props.albumsUserList.length) {\n return (\n
\n {\n //todo\n }}\n style={{ padding: 5 }}\n >\n \n
\n \n \n {\n this.props.albumsUserList[albumUserIndex].shared_to.length>0 && \n }\n content={\n this.props.albumsUserList[albumUserIndex].shared_to.map(el=>{\n return
{el.username}
\n })\n }/>\n\n }\n {this.props.albumsUserList[albumUserIndex].title}
\n {this.props.albumsUserList[albumUserIndex].photo_count} Photo(s)\n {true && (\n \n }\n content={\n
\n Are you sure you want to delete{\" \"}\n {this.props.albumsUserList[albumUserIndex].title}?
\n This action cannot be undone!
\n \n
\n \n this.props.dispatch(\n deleteUserAlbum(\n this.props.albumsUserList[albumUserIndex].id,\n this.props.albumsUserList[albumUserIndex].title\n )\n )\n }\n negative\n >\n Yes\n \n
\n
\n }\n on=\"focus\"\n position=\"bottom center\"\n />\n \n )}\n \n \n );\n } else {\n return
;\n }\n };\n\n render() {\n var entrySquareSize = this.state.entrySquareSize;\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow;\n return (\n
\n
\n
\n \n \n My Albums{\" \"}\n \n \n Showing {this.props.albumsUserList.length} user created albums\n \n \n
\n
\n\n \n {({ width }) => (\n \n )}\n \n
\n );\n }\n}\n\nexport class EntrySquare extends Component {\n render() {\n var images = this.props.cover_photos.map(function(photo) {\n return (\n \n );\n }, this);\n return (\n {\n store.dispatch(searchPhotos(this.props.title));\n store.dispatch(push(\"/search\"));\n }}\n >\n
\n \n {images}\n \n
\n
\n {this.props.title} ({this.props.photoCount})\n
\n
\n );\n }\n}\n\nAlbumUser = connect(store => {\n return {\n albumsUserList: store.albums.albumsUserList,\n fetchingAlbumsUserList: store.albums.fetchingAlbumsUserList,\n fetchedAlbumsUserList: store.albums.fetchedAlbumsUserList\n };\n})(AlbumUser);\n" }, { "path": "src/layouts/albumUserGallery.js", "content": "import React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport {\n fetchUserAlbum,\n fetchPlaceAlbum,\n fetchAutoAlbums,\n generateAutoAlbums\n} from \"../actions/albumsActions\";\nimport {\n Container,\n Icon,\n Divider,\n Header,\n Image,\n Button,\n Flag,\n Card,\n Loader,\n Label\n} from \"semantic-ui-react\";\nimport { fetchPeople, fetchEgoGraph } from \"../actions/peopleActions\";\nimport {\n fetchPhotoDetail,\n fetchNoTimestampPhotoList\n} from \"../actions/photosActions\";\n\nimport { Server, serverAddress } from \"../api_client/apiClient\";\nimport { Grid, List, WindowScroller, AutoSizer } from \"react-virtualized\";\nimport { EgoGraph } from \"../components/egoGraph\";\nimport { push } from \"react-router-redux\";\nimport { countryNames } from \"../util/countryNames\";\nimport {\n AllPhotosMap,\n EventMap,\n LocationClusterMap,\n LocationMap\n} from \"../components/maps\";\nimport { LightBox } from \"../components/lightBox\";\n\nimport _ from \"lodash\";\nimport moment from \"moment\";\nimport { PhotoListView } from \"./ReusablePhotoListView\";\n\nvar topMenuHeight = 45; // don't change this\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nvar DAY_HEADER_HEIGHT = 70;\nvar leftMenuWidth = 85; // don't change this\n\nexport class AlbumUserGallery extends Component {\n state = {\n photosGroupedByDate: [],\n idx2hash: [],\n albumID: null\n };\n\n componentDidMount() {\n this.props.dispatch(fetchUserAlbum(this.props.match.params.albumID));\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (nextProps.albumsUser.hasOwnProperty(nextProps.match.params.albumID)) {\n const photos =\n nextProps.albumsUser[nextProps.match.params.albumID].photos;\n if (prevState.idx2hash.length != photos.length) {\n var t0 = performance.now();\n var groupedByDate = _.groupBy(photos, el => {\n if (el.exif_timestamp) {\n return moment.utc(el.exif_timestamp).format(\"YYYY-MM-DD\");\n } else {\n return \"No Timestamp\";\n }\n });\n var groupedByDateList = _.reverse(\n _.sortBy(\n _.toPairsIn(groupedByDate).map(el => {\n return { date: el[0], photos: el[1] };\n }),\n el => el.date\n )\n );\n var idx2hash = [];\n groupedByDateList.forEach(g => {\n g.photos.forEach(p => {\n idx2hash.push(p.image_hash);\n });\n });\n var t1 = performance.now();\n console.log(t1 - t0);\n return {\n ...prevState,\n photosGroupedByDate: groupedByDateList,\n idx2hash: idx2hash,\n albumID: nextProps.match.params.albumID\n };\n } else {\n return null;\n }\n } else {\n return null;\n }\n }\n\n render() {\n const { fetchingAlbumsUser } = this.props;\n console.log(this.props);\n const isPublic =\n this.props.albumsUser[this.props.match.params.albumID] &&\n this.props.albumsUser[this.props.match.params.albumID].owner.id !==\n this.props.auth.access.user_id;\n return (\n \n {\", \"}owned by{\" \"}\n \n {this.props.albumsUser[this.props.match.params.albumID].owner\n .id === this.props.auth.access.user_id\n ? \"you\"\n : this.props.albumsUser[this.props.match.params.albumID].owner\n .username}\n \n \n ) : (\n \"\"\n )\n }\n loading={fetchingAlbumsUser}\n titleIconName={\"bookmark\"}\n photosGroupedByDate={this.state.photosGroupedByDate}\n idx2hash={this.state.idx2hash}\n match={this.props.match}\n isPublic={isPublic}\n />\n );\n }\n}\n\nAlbumUserGallery = connect(store => {\n return {\n auth: store.auth,\n albumsUser: store.albums.albumsUser,\n fetchingAlbumsUser: store.albums.fetchingAlbumsUser,\n fetchedAlbumsUser: store.albums.fetchedAlbumsUser,\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail\n };\n})(AlbumUserGallery);\n" }, { "path": "src/layouts/albums.js", "content": "import React, {Component} from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchDateAlbumsList} from '../actions/albumsActions'\nimport {AlbumDateCard, AlbumDateCardPlaceholder, AlbumDateCardPlain, AlbumDateCardPlainPlaceholder, AlbumAutoGallery} from '../components/album'\nimport {Container, Icon, Header, Button, Card, Label, Popup, Image, Divider} from 'semantic-ui-react'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\nimport {AlbumAutoMonths} from './albumAutoMonths'\nimport {AlbumDateMonths} from './albumDateMonths'\n\n\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\nexport class Albums extends Component {\n constructor() {\n super();\n \tthis.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200\n \t})\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this)\n }\n\n componentWillMount() {\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n }\n\n calculateEntrySquareSize() {\n \tif (window.innerWidth < 600) {\n \t\tvar numEntrySquaresPerRow = 2\n \t} \n else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3\n }\n \telse if (window.innerWidth < 1000) {\n \t\tvar numEntrySquaresPerRow = 4\n \t}\n else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5\n }\n \telse {\n \t\tvar numEntrySquaresPerRow = 6\n \t}\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15\n\n console.log(columnWidth)\n var entrySquareSize = columnWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n \tthis.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow\n \t})\n }\n\n\n\trender () {\n\t\tvar entrySquareSize = this.state.entrySquareSize\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow\n\t\treturn (\n\t\t\t\t
\n
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n
\n \n\n\t\t\t\t
\n\t\t)\n\t}\n}\n\nexport class EntrySquare extends Component {\n\trender () {\n\t\treturn (\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t{this.props.title}\n\t\t\t\t
\n\t\t\t
\n\t\t)\n\t}\n}" }, { "path": "src/layouts/albumsAutoListCardView.js", "content": "import Immutable from \"immutable\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent, Component} from \"react\";\nimport {\n Collection,\n CellMeasurer,\n CellMeasurerCache,\n createMasonryCellPositioner,\n Masonry,\n AutoSizer,\n WindowScroller,\n} from 'react-virtualized';\nimport styles from 'react-virtualized/styles.css'; // only needs to be imported once\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer,\n Container, Label, Popup, Segment, Button, Icon, Rating} from 'semantic-ui-react';\nimport { connect } from \"react-redux\";\n\n\nimport {fetchAutoAlbumsList} from '../actions/albumsActions'\n\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\n\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\n\n\nconst month2month = {\n \"01\":\"January\",\n \"02\":\"February\",\n \"03\":\"March\",\n \"04\":\"April\",\n \"05\":\"May\",\n \"06\":\"June\",\n \"07\":\"July\",\n \"08\":\"August\",\n \"09\":\"September\",\n \"10\":\"October\",\n \"11\":\"November\",\n \"12\":\"December\"\n}\n\n\nexport class AlbumsAutoListCardView extends Component {\n constructor(props){\n super(props)\n this.insertMonthCardsIntoAlbumsList = this.insertMonthCardsIntoAlbumsList.bind(this)\n }\n\n insertMonthCardsIntoAlbumsList(){\n var newAlbumsList = []\n\n this.props.albumsAutoList.map(function(album){\n if (newAlbumsList.length>0){\n var lastMonth = newAlbumsList[newAlbumsList.length-1].timestamp.split('T')[0].split('-').slice(0,2).join('-')\n var thisMonth = album.timestamp.split('T')[0].split('-').slice(0,2).join('-')\n if (lastMonth==thisMonth) {\n newAlbumsList.push(album)\n } \n else {\n newAlbumsList.push(thisMonth)\n newAlbumsList.push(album) \n }\n }\n else {\n var newMonth = album.timestamp.split('T')[0].split('-').slice(0,2).join('-')\n newAlbumsList.push(newMonth)\n newAlbumsList.push(album)\n }\n })\n return newAlbumsList\n }\n\n render() {\n if (this.props.fetchedAlbumsAutoList) {\n var albumListWithMonthCards = this.insertMonthCardsIntoAlbumsList()\n return (\n
\n \n \n
\n )\n }\n else {\n return (\n
\n \n \n \n Loading Event Albums List...\n Might take a while if not cached in the server.\n \n \n
\n ) \n }\n }\n}\n\n\nexport class MonthCard extends Component {\n render() {\n return (\n
\n
\n
\n \n {month2month[this.props.month.split('-')[1]]}\n \n {this.props.month.split('-')[0]}\n \n \n
\n
\n
\n )\n }\n}\n\n\nexport class AlbumAutoCard extends Component {\n render() {\n var numPeople = this.props.album.people.length\n var albumId = this.props.album.people.id\n if (this.props.album.people.length > 0) {\n var mappedPeopleIcons = this.props.album.people.map(function(person){\n return (\n \n )\n })\n mappedPeopleIcons = (\n {mappedPeopleIcons}\n )\n }\n else {\n // empty placeholder so the extra portion (with face icons) of the cards line up\n var mappedPeopleIcons = (
)\n }\n return (\n
\n \n
\n {this.props.album.title}
\n
\n {this.props.album.timestamp.split('T')[0]}\n
\n
\n {this.props.album.photo_count} Photos\n
\n
\n \n {this.props.album.people.length} People\n }\n content={mappedPeopleIcons}\n basic/>\n
\n
\n \n
\n
\n
\n )\n }\n}\n\nexport class AlbumsAutoListHeader extends Component {\n\n componentWillMount() {\n this.props.dispatch(fetchAutoAlbumsList())\n var _dispatch = this.props.dispatch\n var intervalId = setInterval(function(){\n _dispatch(fetchPhotoScanStatus())\n _dispatch(fetchAutoAlbumProcessingStatus())\n },2000\n )\n this.setState({intervalId:intervalId})\n }\n\n componentWillUnmount() {\n clearInterval(this.state.intervalId)\n }\n\n handleAutoAlbumGen = e => this.props.dispatch(generateAutoAlbums())\n\n\n render() {\n return (\n
\n
\n \n \n \n \n
\n
\n \n Events\n View automatically generated event albums\n \n
\n
\n )\n }\n}\n\n\n\n\n\nexport class AlbumsAutoListCards extends PureComponent {\n constructor(props, context) {\n super(props, context);\n\n this._columnCount = 0;\n\n this._cache = new CellMeasurerCache({\n defaultHeight: 10,\n defaultWidth: 150,\n fixedWidth: true\n });\n\n this._columnHeights = {};\n\n this.state = {\n columnWidth: 150,\n height: 200,\n gutterSize: 10,\n windowScrollerEnabled: true\n };\n\n\n this._cellRenderer = this._cellRenderer.bind(this);\n this._onResize = this._onResize.bind(this);\n this._renderAutoSizer = this._renderAutoSizer.bind(this);\n this._renderMasonry = this._renderMasonry.bind(this);\n this._setMasonryRef = this._setMasonryRef.bind(this);\n }\n\n render() {\n const {\n columnWidth,\n height,\n gutterSize,\n windowScrollerEnabled\n } = this.state;\n\n let child;\n\n if (windowScrollerEnabled) {\n child = (\n \n {this._renderAutoSizer}\n \n );\n } else {\n child = this._renderAutoSizer({ height });\n }\n\n return (\n
{child}
\n );\n\n }\n\n _calculateColumnCount() {\n const { columnWidth, gutterSize } = this.state;\n\n this._columnCount = Math.floor(this._width / (columnWidth + gutterSize));\n }\n\n _cellRenderer({ index, key, parent, style }) {\n const { columnWidth } = this.state;\n if (typeof(this.props.albums[index])=='object'){\n return (\n \n \n \n \n\n \n \n );\n }\n else {\n return (\n \n \n \n \n\n \n )\n }\n }\n\n _initCellPositioner() {\n if (typeof this._cellPositioner === \"undefined\") {\n const { columnWidth, gutterSize } = this.state;\n\n this._cellPositioner = createMasonryCellPositioner({\n cellMeasurerCache: this._cache,\n columnCount: this._columnCount,\n columnWidth,\n spacer: gutterSize\n });\n }\n }\n\n _onResize({ width }) {\n this._width = width;\n\n this._columnHeights = {};\n this._calculateColumnCount();\n this._resetCellPositioner();\n this._masonry.recomputeCellPositions();\n }\n\n _renderAutoSizer({ height, scrollTop }) {\n this._height = height;\n this._scrollTop = scrollTop;\n\n return (\n \n {this._renderMasonry}\n \n );\n }\n\n _renderMasonry({ width }) {\n this._width = width;\n\n this._calculateColumnCount();\n this._initCellPositioner();\n\n const { height, windowScrollerEnabled } = this.state;\n console.log(height)\n return (\n
\n \n
\n );\n }\n\n _resetCellPositioner() {\n const { columnWidth, gutterSize } = this.state;\n\n this._cellPositioner.reset({\n columnCount: this._columnCount,\n columnWidth,\n spacer: gutterSize\n });\n }\n\n _setMasonryRef(ref) {\n this._masonry = ref;\n }\n}\n\n\nAlbumsAutoListCardView = connect((store)=>{\n return {\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos,\n }\n})(AlbumsAutoListCardView)\n\n\n\nAlbumsAutoListCards = connect((store)=>{\n return {\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos,\n }\n})(AlbumsAutoListCards)\n\n\n\nAlbumsAutoListHeader = connect((store)=>{\n return {\n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos,\n }\n})(AlbumsAutoListHeader)\n\n\n" }, { "path": "src/layouts/albumsAutoListCardViewMonthGroup.js", "content": "import Immutable from \"immutable\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent, Component} from \"react\";import {\n Collection,\n CellMeasurer,\n CellMeasurerCache,\n createMasonryCellPositioner,\n Masonry,\n List,\n AutoSizer,\n WindowScroller,\n} from 'react-virtualized';\nimport styles from 'react-virtualized/styles.css'; // only needs to be imported once\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer,\n Container, Label, Popup, Segment, Button, Icon, Rating} from 'semantic-ui-react';\nimport { connect } from \"react-redux\";\n\n\nimport {fetchAutoAlbumsList} from '../actions/albumsActions'\n\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\n\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\nimport {Server, serverAddress} from '../api_client/apiClient'\n\n\n\n\nexport class ListExample extends PureComponent {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n listHeight: 300,\n listRowHeight: 50,\n overscanRowCount: 10,\n rowCount: 10,\n scrollToIndex: undefined,\n showScrollingPlaceholder: false,\n useDynamicRowHeight: false\n };\n\n this._getRowHeight = this._getRowHeight.bind(this);\n this._noRowsRenderer = this._noRowsRenderer.bind(this);\n this._onRowCountChange = this._onRowCountChange.bind(this);\n this._onScrollToRowChange = this._onScrollToRowChange.bind(this);\n this._rowRenderer = this._rowRenderer.bind(this);\n }\n\n render() {\n const {\n listHeight,\n listRowHeight,\n overscanRowCount,\n rowCount,\n scrollToIndex,\n showScrollingPlaceholder,\n useDynamicRowHeight\n } = this.state;\n\n return (\n
\n \n \n {({ width }) =>\n }\n \n \n
\n );\n }\n\n _getDatum(index) {\n const list = [1,2,3,4,5];\n\n return list[index % list.length];\n }\n\n _getRowHeight({ index }) {\n return this._getDatum(index);\n }\n\n _noRowsRenderer() {\n return
No rows
;\n }\n\n _onRowCountChange(event) {\n const rowCount = parseInt(event.target.value, 10) || 0;\n\n this.setState({ rowCount });\n }\n\n _onScrollToRowChange(event) {\n const { rowCount } = this.state;\n let scrollToIndex = Math.min(\n rowCount - 1,\n parseInt(event.target.value, 10)\n );\n\n if (isNaN(scrollToIndex)) {\n scrollToIndex = undefined;\n }\n\n this.setState({ scrollToIndex });\n }\n\n _rowRenderer({ index, isScrolling, key, style }) {\n const { showScrollingPlaceholder, useDynamicRowHeight } = this.state;\n\n return (\n
\n hello\n
\n );\n }\n}\n" }, { "path": "src/layouts/allPhotosGroupedByDate.js", "content": "import React, {Component} from 'react';\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer,\n Container, Label, Popup, Segment, Button, Icon} from 'semantic-ui-react';\nimport Gallery from 'react-grid-gallery'\nimport VisibilitySensor from 'react-visibility-sensor'\nimport { connect } from \"react-redux\";\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\nimport {simpleFetchPhotos} from '../actions/photosActions'\nimport { Map, TileLayer, Marker } from 'react-leaflet'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport {fetchDateAlbumsList} from '../actions/albumsActions'\nimport LazyLoad from 'react-lazyload';\n\n\n //
\n // \n //
\nvar SIDEBAR_WIDTH = 85;\n\nclass ImagePlaceholder extends Component {\n render () {\n return (\n
\n
\n )\n }\n}\n\nexport class AllPhotosGroupedByDate extends Component {\n constructor(props){\n super(props)\n this.groupPhotosByDate = this.groupPhotosByDate.bind(this)\n this.receivedAllProps = this.receivedAllProps.bind(this)\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this)\n this.groupedPhotosToImageGrids = this.groupedPhotosToImageGrids.bind(this)\n \tthis.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200\n \t})\n }\n\n calculateEntrySquareSize() {\n \tif (window.innerWidth < 600) {\n \t\tvar numEntrySquaresPerRow = 4\n \t} \n else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 6\n }\n \telse if (window.innerWidth < 1000) {\n \t\tvar numEntrySquaresPerRow = 8\n \t}\n else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 10\n }\n \telse {\n \t\tvar numEntrySquaresPerRow = 12\n \t}\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15\n\n console.log(columnWidth)\n var entrySquareSize = columnWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n \tthis.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow\n \t})\n }\n\n receivedAllProps() {\n if (this.props.fetchedPhotos && \n !this.props.photos.length==0 && \n !this.props.fetchingPhotos &&\n this.props.fetchedPhotos) {\n\n console.log(\"fetchedPhotos\",this.props.fetchedPhotos)\n console.log(\"photos\",this.props.photos.length)\n console.log(\"fetchingPhotos\",this.props.fetchingPhotos)\n console.log(\"fetchedPhotos\",this.props.fetchedPhotos)\n console.log(\"albumsDateList\",this.props.albumsDateList.length)\n console.log(\"fetchingAlbumsDateList\",this.props.fetchingAlbumsDateList)\n console.log(\"fetchedAlbumsDateList\",this.props.fetchedAlbumsDateList)\n\n\n return true\n }\n else {\n return false\n }\n }\n\n componentWillMount() {\n this.props.dispatch(simpleFetchPhotos())\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n }\n\n groupPhotosByDate() {\n var photosGroupedByDate = {}\n photosGroupedByDate['Unknown Date'] = []\n\n this.props.photos.map(function(photo){\n if (photo.exif_timestamp != null) {\n var date = photo.exif_timestamp.split('T')[0]\n if (photosGroupedByDate.hasOwnProperty(date)){\n photosGroupedByDate[date].push(photo)\n }\n else{\n photosGroupedByDate[date] = []\n photosGroupedByDate[date].push(photo)\n }\n }\n else {\n photosGroupedByDate['Unknown Date'].push(photo) \n }\n })\n return photosGroupedByDate\n }\n\n\n groupedPhotosToImageGrids(groupedPhotos) {\n var imageGrids = []\n for (var date in groupedPhotos) {\n if (groupedPhotos.hasOwnProperty(date)) {\n var imageGrid = groupedPhotos[date].map(function(photo){\n return (\n\t\t\t
\n }>\n \n \n
\n\n )\n },this)\n var groupHeight = this.state.entrySquareSize*Math.ceil(groupedPhotos[date].length/this.state.numEntrySquaresPerRow.toFixed(1))\n var renderableImageGrid = (\n
\n\n
\n \n {date}\n \n {imageGrid.length} Photos\n \n \n
\n \n
\n }>\n \n {imageGrid}\n \n \n \n )\n imageGrids.push(renderableImageGrid)\n }\n }\n return imageGrids\n }\n\n\n render() {\n var entrySquareSize = this.state.entrySquareSize\n var numEntrySquaresPerRow = this.state.numEntrySquaresPerRow\n console.log('received all props?', this.receivedAllProps())\n if (this.props.fetchedPhotos){\n var groupedPhotos = this.groupPhotosByDate()\n var renderable = this.groupedPhotosToImageGrids(groupedPhotos)\n }\n else {\n var renderable = (\n
\n \n \n
Loading Photos
\n {\"If you just added a lot of photos, or haven't visited this page in a while, \"} \n {\"this might take a long time, depending on the number of photos in your library. \"}\n {\"After the intial load, subsequent visits to this page should be faster from caching.\"}\n \n \n
\n )\n }\n return (\n
\n {renderable}\n
\n )\n }\n}\n\n\n\n\nAllPhotosGroupedByDate = connect((store)=>{\n return {\n fetchedPhotos: store.photos.fetchedPhotos,\n fetchingPhotos: store.photos.fetchingPhotos,\n photos: store.photos.photos, \n albumsDateList: store.albums.albumsDateList,\n fetchingAlbumsDateList: store.albums.fetchingAlbumsDateList,\n fetchedAlbumsDateList: store.albums.fetchedAlbumsDateList,\n }\n})(AllPhotosGroupedByDate)\n" }, { "path": "src/layouts/allPhotosView.js", "content": "import React, {Component} from 'react';\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer, Modal, Grid, Sticky, \n Container, Label, Popup, Segment, Button, Icon, Table, Transition} from 'semantic-ui-react';\nimport Gallery from 'react-grid-gallery'\nimport VisibilitySensor from 'react-visibility-sensor'\nimport { connect } from \"react-redux\";\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\nimport {fetchDateAlbumsList,fetchAlbumsDateGalleries} from '../actions/albumsActions'\nimport { Map, TileLayer, Marker } from 'react-leaflet'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\nimport {ChartyPhotosScrollbar} from '../components/chartyPhotosScrollbar'\n\n\n\nimport {ImageInfoTable} from '../components/imageInfoTable'\nimport {ModalPhotoViewVertical} from '../components/modalPhotoView';\n\nimport ContentLoader from \"react-content-loader\"\n\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\n\nfunction calculateDayHeight(numPhotos,sidebarVisible) {\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15 \n\n var photoSize = 250\n \n var spacePerRow = Math.floor(columnWidth / photoSize)\n if (spacePerRow >= numPhotos) {\n var numRows = 1\n var numCols = numPhotos\n }\n else {\n var numRows = Math.ceil( numPhotos / spacePerRow )\n var numCols = spacePerRow\n }\n\n return numRows * photoSize + 2\n}\n\nclass DayPlaceholder extends Component {\n constructor() {\n super();\n this.state = {\n width: 800,\n height: 182\n }\n this.calculatePlaceholderSize = this.calculatePlaceholderSize.bind(this)\n }\n\n\n\n /**\n * Add event listener\n */\n componentDidMount() {\n this.calculatePlaceholderSize();\n window.addEventListener(\"resize\", this.calculatePlaceholderSize.bind(this));\n }\n\n /**\n * Remove event listener\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.updateDimensions.bind(this));\n }\n */\n\n calculatePlaceholderSize() {\n var numPhotos = this.props.numPhotos\n var photoSize = 250\n // var columnWidth = this.state.width - 120\n\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15\n\n\n\n var spacePerRow = Math.floor(columnWidth / photoSize)\n if (spacePerRow >= numPhotos) {\n var numRows = 1\n var numCols = numPhotos\n }\n else {\n var numRows = Math.ceil( numPhotos / spacePerRow )\n var numCols = spacePerRow\n }\n\n\n var boxHeight = numRows * photoSize + 2\n var boxWidth = numCols * photoSize\n\n return {height:boxHeight,width:boxWidth}\n }\n\n render() {\n var size = this.calculatePlaceholderSize()\n var h = `${size.height}px`\n var w = `${size.width}px`\n\n return (\n
\n
\n )\n }\n}\n\nclass PhotoDayGroup extends Component {\n constructor() {\n super()\n this.state = {modalPhotoIndex:0, showModal:false}\n this.onPhotoClick = this.onPhotoClick.bind(this)\n this._handleKeyDown = this._handleKeyDown.bind(this)\n }\n\n _handleKeyDown (event) {\n switch( event.keyCode ) {\n case ESCAPE_KEY:\n if (this.refs.photoGroupRef){\n this.setState({showModal:false}); \n }\n break;\n case RIGHT_ARROW_KEY:\n if (this.state.modalPhotoIndex < this.props.albumsDateGalleries[this.props.album.id].photos.length-1) {\n if (this.refs.photoGroupRef) {\n this.setState({modalPhotoIndex:this.state.modalPhotoIndex+1})\n }\n }\n break;\n case LEFT_ARROW_KEY:\n if (this.state.modalPhotoIndex > 0) {\n if (this.refs.photoGroupRef){\n this.setState({modalPhotoIndex:this.state.modalPhotoIndex-1})\n }\n }\n break;\n default: \n break;\n }\n }\n\n\n componentWillUnmount() {\n document.removeEventListener(\"keydown\", this._handleKeyDown.bind(this));\n }\n\n\n onPhotoClick(idx) {\n this.setState({modalPhotoIndex:idx,showModal:true})\n\n }\n\n componentWillMount() {\n\n if (!this.props.albumsDateGalleries.hasOwnProperty(this.props.album.id)) {\n this.props.dispatch(fetchAlbumsDateGalleries(this.props.album.id))\n }\n document.addEventListener('keydown',this._handleKeyDown)\n }\n\n render() {\n if (this.props.albumsDateGalleries.hasOwnProperty(this.props.album.id)) {\n var photos = this.props.albumsDateGalleries[this.props.album.id].photos\n var images = this.props.albumsDateGalleries[this.props.album.id].photos.map(function(image,idx){\n return (\n \n }\n >\n\n {this.onPhotoClick(idx)}}\n height={250} \n width={250} \n src={serverAddress+image.square_thumbnail_url}/>\n\n\n \n )\n },this)\n return(\n
\n \n {images}\n \n\n {this.setState({showModal:false})}}>\n \n Showing photos from {this.props.album.date} ({this.state.modalPhotoIndex+1}/{images.length})\n \n \n \n\n
\n )\n }\n else {\n return()\n }\n }\n}\n\n\nclass PhotoDayGroupReactGridGallery extends Component {\n componentWillMount() {\n if (!this.props.albumsDateGalleries.hasOwnProperty(this.props.album.id)) {\n this.props.dispatch(fetchAlbumsDateGalleries(this.props.album.id))\n }\n }\n render() {\n if (this.props.albumsDateGalleries.hasOwnProperty(this.props.album.id)) {\n var photos = this.props.albumsDateGalleries[this.props.album.id].photos\n var images = this.props.albumsDateGalleries[this.props.album.id].photos.map(function(image,idx){\n return (\n {\n src:serverAddress+image.image_url,\n thumbnail: serverAddress+image.thumbnail_url,\n thumbnailWidth: image.thumbnail_width,\n thumbnailHeight: image.thumbnail_height,\n isSelected: false,\n caption: image.search_captions\n }\n )\n })\n\n\n return(\n
\n \n
\n )\n }\n else {\n return()\n }\n }}\n\n\n\nexport class AllPhotosView extends Component {\n\n componentWillMount() {\n this.props.dispatch(fetchDateAlbumsList())\n }\n\n\n render() {\n if (this.props.fetchedAlbumsDateList) {\n var photoDayGroups = this.props.albumsDateList.map(function(album){\n return (\n
\n
\n \n {album.date}\n {album.photo_count} Photos\n \n
\n
\n )}>\n\n \n\n \n \n )\n },this)\n return (\n
\n {photoDayGroups}\n
\n ) \n }\n else {\n return (\n
\n \n
\n )\n }\n }\n}\n\n\nPhotoDayGroup = connect((store)=>{\n return {\n albumsDateGalleries: store.albums.albumsDateGalleries,\n }\n})(PhotoDayGroup)\n\nPhotoDayGroupReactGridGallery = connect((store)=>{\n return {\n albumsDateGalleries: store.albums.albumsDateGalleries,\n }\n})(PhotoDayGroupReactGridGallery)\n\nAllPhotosView = connect((store)=>{\n return {\n albumsDateList: store.albums.albumsDateList,\n fetchingAlbumsDateList: store.albums.fetchingAlbumsDateList,\n fetchedAlbumsDateList: store.albums.fetchedAlbumsDateList, \n }\n})(AllPhotosView)\n" }, { "path": "src/layouts/allPhotosViewHash.js", "content": "import React, {Component} from 'react';\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer, Modal, Grid, Sticky, \n Container, Label, Popup, Segment, Button, Icon, Table, Transition} from 'semantic-ui-react';\nimport Gallery from 'react-grid-gallery'\nimport VisibilitySensor from 'react-visibility-sensor'\nimport { connect } from \"react-redux\";\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\nimport { fetchDateAlbumsPhotoHashList,fetchAlbumsDateGalleries} from '../actions/albumsActions'\nimport { Map, TileLayer, Marker } from 'react-leaflet'\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport LazyLoad from 'react-lazyload';\nimport {ChartyPhotosScrollbar} from '../components/chartyPhotosScrollbar'\n\n\n\nimport {ImageInfoTable} from '../components/imageInfoTable'\nimport {ModalPhotoViewVertical} from '../components/modalPhotoView';\n\nimport ContentLoader from \"react-content-loader\"\n\nvar ESCAPE_KEY = 27;\nvar ENTER_KEY = 13;\nvar RIGHT_ARROW_KEY = 39;\nvar UP_ARROW_KEY = 38;\nvar LEFT_ARROW_KEY = 37;\nvar DOWN_ARROW_KEY = 40;\n\nvar SIDEBAR_WIDTH = 85;\n\n\nclass DayGroupPlaceholder extends Component {\n render () {\n var photos = this.props.day.photos.map(function(photo) {\n return (\n \n )\n },this)\n var gridHeight = this.props.itemSize * Math.ceil(this.props.day.photos.length/this.props.numItemsPerRow.toFixed(1))\n return (\n
\n
{this.props.day.date}...
\n
\n\n
\n
\n )\n }\n}\n\n\nclass DayGroup extends Component {\n render () {\n var photos = this.props.day.photos.map(function(photo) {\n return (\n \n }\n >\n \n \n )\n },this)\n var gridHeight = this.props.itemSize * Math.ceil(this.props.day.photos.length/this.props.numItemsPerRow.toFixed(1))\n return (\n }>\n
\n
{this.props.day.date}
\n
\n {photos}\n
\n
\n \n )\n }\n}\n\n\nexport class AllPhotosHashListView extends Component {\n constructor(props){\n super(props)\n this.calculateEntrySquareSize = this.calculateEntrySquareSize.bind(this)\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:200\n })\n }\n componentWillMount() {\n if (this.props.albumsDatePhotoHashList.length < 1) {\n this.props.dispatch(fetchDateAlbumsPhotoHashList())\n }\n this.calculateEntrySquareSize();\n window.addEventListener(\"resize\", this.calculateEntrySquareSize.bind(this));\n \n }\n\n calculateEntrySquareSize() {\n if (window.innerWidth < 600) {\n var numEntrySquaresPerRow = 2\n } \n else if (window.innerWidth < 800) {\n var numEntrySquaresPerRow = 3\n }\n else if (window.innerWidth < 1000) {\n var numEntrySquaresPerRow = 4\n }\n else if (window.innerWidth < 1200) {\n var numEntrySquaresPerRow = 5\n }\n else {\n var numEntrySquaresPerRow = 6\n }\n\n var columnWidth = window.innerWidth - SIDEBAR_WIDTH - 5 - 5 - 15\n\n\n var entrySquareSize = columnWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n this.setState({\n width: window.innerWidth,\n height: window.innerHeight,\n entrySquareSize:entrySquareSize,\n numEntrySquaresPerRow:numEntrySquaresPerRow\n })\n console.log('column width:',columnWidth)\n console.log('item size:',entrySquareSize)\n console.log('num items per row',numEntrySquaresPerRow)\n }\n\n render () {\n if (this.props.fetchingAlbumsDatePhotoHashList) {\n return (
)\n }\n else {\n console.time('someFunction');\n var pageContent = this.props.albumsDatePhotoHashList.map(function(day){\n return (\n \n )\n },this)\n console.timeEnd('someFunction');\n }\n\n\n return (\n
{pageContent}
\n )\n }\n}\n\n\nAllPhotosHashListView = connect((store)=>{\n return {\n albumsDatePhotoHashList: store.albums.albumsDatePhotoHashList,\n fetchingAlbumsDatePhotoHashList: store.albums.fetchingAlbumsDatePhotoHashList,\n fetchedAlbumsDatePhotoHashList: store.albums.fetchedAlbumsDatePhotoHashList, \n }\n})(AllPhotosHashListView)\n" }, { "path": "src/layouts/allPhotosViewHashRV.js", "content": "import React, {Component} from 'react';\nimport ReactDOM from 'react-dom';\nimport { Grid, WindowScroller,AutoSizer } from 'react-virtualized';\nimport 'react-virtualized/styles.css'; // only needs to be imported once\nimport { connect } from \"react-redux\";\n\nimport { \n fetchDateAlbumsPhotoHashList,\n fetchAlbumsDateGalleries,\n fetchUserAlbumsList,\n editUserAlbum,\n createNewUserAlbum} from '../actions/albumsActions'\n\nimport { \n fetchPhotos, \n fetchPhotoDetail, \n setPhotosFavorite,\n setPhotosHidden} from '../actions/photosActions'\n\nimport { \n Card, \n Image, \n Header, \n Divider, \n Item, \n Loader, \n Dimmer, \n Sticky, \n Portal, \n List, \n Input, \n Rating, \n Container, \n Label, \n Popup, \n Segment, \n Button, \n Icon, \n Table, \n Transition, \n Breadcrumb} from 'semantic-ui-react';\n\nimport {Server, serverAddress} from '../api_client/apiClient'\nimport {LightBox} from '../components/lightBox'\nimport LazyLoad from 'react-lazyload';\n// import Lightbox from 'react-image-lightbox';\nimport {LocationMap} from '../components/maps'\nimport { push } from 'react-router-redux'\nimport {searchPhotos} from '../actions/searchActions'\nimport styles from '../App.css';\nimport Draggable from 'react-draggable';\nimport debounce from 'lodash/debounce'\nimport _ from 'lodash'\nimport * as moment from 'moment';\nimport Modal from 'react-modal';\n\nimport {calculateGridCells, calculateGridCellSize} from '../util/gridUtils'\nimport {ScrollSpeed, SPEED_THRESHOLD, SCROLL_DEBOUNCE_DURATION} from '../util/scrollUtils'\nimport {fuzzy_match} from '../util/fuzzyMatch'\nimport {PhotoListView} from './ReusablePhotoListView'\n\nvar TOP_MENU_HEIGHT = 55 // don't change this\nvar LEFT_MENU_WIDTH = 85 // don't change this\nvar SIDEBAR_WIDTH = 85\nvar TIMELINE_SCROLL_WIDTH = 0\nvar DAY_HEADER_HEIGHT = 70\n\nif (window.innerWidth < 600) {\n var LIGHTBOX_SIDEBAR_WIDTH = window.innerWidth\n} else {\n var LIGHTBOX_SIDEBAR_WIDTH = 360\n}\n\nconst customStyles = {\n content : {\n top:150,\n left:window.innerWidth < 600 ? 15+SIDEBAR_WIDTH : '20%',\n right:window.innerWidth < 600 ? 15 : '20%',\n height:window.innerHeight-300,\n width:window.innerWidth < 600 ? window.innerWidth-30-SIDEBAR_WIDTH : '60%' ,\n overflow:'hidden',\n // paddingRight:0,\n // paddingBottomt:0,\n // paddingLeft:10,\n // paddingTop:10,\n padding:0,\n backgroundColor:'white'\n }\n};\n\n\n\n\n\n\n\nexport class AllPhotosHashListViewRV extends Component {\n componentDidMount() {\n // this.props.dispatch(fetchPhotos())\n if (this.props.albumsDatePhotoHashList.length < 1) {\n this.props.dispatch(fetchDateAlbumsPhotoHashList())\n }\n }\n\n render() {\n const {fetchingAlbumsDatePhotoHashList,fetchedAlbumsDatePhotoHashList} = this.props\n return (\n \n )\n }\n}\n\nAllPhotosHashListViewRV = connect((store)=>{\n return {\n showSidebar: store.ui.showSidebar,\n\n photos: store.photos.photos,\n fetchingPhotos: store.photos.fetchingPhotos,\n fetchedPhotos: store.photos.fetchedPhotos,\n\n photoDetails: store.photos.photoDetails,\n fetchingPhotoDetail: store.photos.fetchingPhotoDetail,\n fetchedPhotoDetail: store.photos.fetchedPhotoDetail,\n\n idx2hash: store.albums.idx2hash,\n\n albumsDatePhotoHashList: store.albums.albumsDatePhotoHashList,\n fetchingAlbumsDatePhotoHashList: store.albums.fetchingAlbumsDatePhotoHashList,\n fetchedAlbumsDatePhotoHashList: store.albums.fetchedAlbumsDatePhotoHashList, \n }\n})(AllPhotosHashListViewRV)\n" }, { "path": "src/layouts/allPhotosViewLL.js", "content": "// all photos using lazyload\n\nimport React, {Component} from 'react'\nimport { connect } from \"react-redux\";\nimport {fetchPhotos} from '../actions/photosActions'\nimport {Server, serverAddress} from '../api_client/apiClient'\n\n\nexport class AllPhotosViewLL extends Component {\n constructor(props){\n super(props)\n this.groupPhotosByDate = this.groupPhotosByDate.bind(this)\n }\n\n componentWillMount() {\n this.props.dispatch(fetchPhotos())\n }\n\n groupPhotosByDate() {\n var dates = []\n this.props.photos.map(function(photo){\n if (photo.exif_timestamp != null) {\n dates.push(photo.exif_timestamp.split('T')[0])\n }\n })\n dates = new Set(dates)\n dates = Array.from(dates)\n dates.push('undated')\n console.log(dates)\n\n var photosGroupedByDate = {}\n \n dates.map(function(date){\n photosGroupedByDate[date] = []\n })\n\n this.props.photos.map(function(photo){\n if (photo.exif_timestamp != null){\n var d = photo.exif_timestamp.split('T')[0]\n photosGroupedByDate[d].push(photo)\n }\n else {\n photosGroupedByDate['undated'].push(photo)\n }\n })\n console.log(photosGroupedByDate)\n }\n\n render() {\n if (this.props.fetchedPhotos) {\n this.groupPhotosByDate()\n }\n return (\n
hello
\n )\n }\n}\n\nAllPhotosViewLL = connect((store)=>{\n return {\n fetchedPhotos: store.photos.fetchedPhotos,\n fetchingPhotosfetchedPhotos: store.photos.fetchingPhotos,\n photos: store.photos.photos,\n }\n})(AllPhotosViewLL)\n\n" }, { "path": "src/layouts/allPhotosViewRV.js", "content": "import Immutable from \"immutable\";\nimport PropTypes from \"prop-types\";\nimport React, { PureComponent, Component} from \"react\";\nimport {\n Collection,\n CellMeasurer,\n CellMeasurerCache,\n createMasonryCellPositioner,\n Masonry,\n AutoSizer,\n WindowScroller,\n} from 'react-virtualized';\nimport styles from 'react-virtualized/styles.css'; // only needs to be imported once\nimport { Card, Image, Header, Divider, Item, Loader, Dimmer, List,\n Container, Label, Popup, Segment, Button, Icon, Rating} from 'semantic-ui-react';\nimport { connect } from \"react-redux\";\n\n\nimport {fetchAutoAlbumsList} from '../actions/albumsActions'\n\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\n\nimport {fetchPhotos} from '../actions/photosActions'\nimport {fetchPeopleAlbums, generateAutoAlbums} from '../actions/albumsActions'\nimport {fetchCountStats,fetchPhotoScanStatus,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\n\nimport {Server, serverAddress} from '../api_client/apiClient'\n\nimport {ChartyPhotosScrollbar} from '../components/chartyPhotosScrollbar'\nimport {fetchDateAlbumsList} from '../actions/albumsActions'\n\nconst month2month = {\n \"01\":\"January\",\n \"02\":\"February\",\n \"03\":\"March\",\n \"04\":\"April\",\n \"05\":\"May\",\n \"06\":\"June\",\n \"07\":\"July\",\n \"08\":\"August\",\n \"09\":\"September\",\n \"10\":\"October\",\n \"11\":\"November\",\n \"12\":\"December\"\n}\n\n\nexport class PhotosListCardView extends Component {\n constructor(props){\n super(props)\n this.insertMonthCardIntoPhotosList = this.insertMonthCardIntoPhotosList.bind(this)\n }\n\n componentWillMount(){\n this.props.dispatch(fetchPhotos())\n }\n\n insertMonthCardIntoPhotosList(){\n var newPhotosList = []\n\n\n var sortedPhotos = this.props.photos.sort(function(a,b){\n // Turn your strings into dates, and then subtract them\n // to get a value that is either negative, positive, or zero.\n return new Date(b.exif_timestamp) - new Date(a.exif_timestamp);\n });\n\n\n sortedPhotos.map(function(photo){\n if (newPhotosList.length>0){\n if (photo.exif_timestamp == null) { \n var newMonth = \"Unknown-date\"\n }\n else {\n var lastMonth = newPhotosList[newPhotosList.length-1].exif_timestamp.split('T')[0].split('-').slice(0,2).join('-')\n var thisMonth = photo.exif_timestamp.split('T')[0].split('-').slice(0,2).join('-')\n if (lastMonth==thisMonth) {\n newPhotosList.push(photo)\n } \n else {\n newPhotosList.push(thisMonth)\n newPhotosList.push(photo) \n }\n }\n }\n else {\n if (photo.exif_timestamp == null) { \n var newMonth = \"Unknown-date\"\n }\n\n else {\n var newMonth = photo.exif_timestamp.split('T')[0].split('-').slice(0,2).join('-')\n newPhotosList.push(newMonth)\n newPhotosList.push(photo)\n }\n }\n })\n console.log(newPhotosList)\n newPhotosList.map(function(photo){\n console.log(typeof(photo)=='string')\n })\n return newPhotosList\n }\n\n render() {\n if (this.props.fetchedPhotos) {\n var photosListWithMonthCards = this.insertMonthCardIntoPhotosList()\n var months = photosListWithMonthCards.filter(function(element){\n if (typeof(element)=='string'){\n return true\n }\n else {\n return false\n }\n })\n var monthScroll = months.map(function(month){\n return {month.split('-')[1]}\n })\n return (\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n \n Photos\n All photos\n \n
\n\n
\n
\n )\n }\n else {\n return (\n
\n \n \n Loading photos...\n \n \n
\n ) \n }\n }\n}\n\n\nexport class MonthCard extends Component {\n render() {\n return (\n
\n
\n {month2month[this.props.month.split('-')[1]]}\n
\n
\n {this.props.month.split('-')[0]}\n
\n
\n )\n }\n}\n\n\nexport class PhotoCard extends Component {\n render() {\n return (\n
\n \n
\n )\n }\n}\n\n\n\n\n\n\nexport class PhotoListCards extends PureComponent {\n constructor(props, context) {\n super(props, context);\n\n this._columnCount = 0;\n\n this._cache = new CellMeasurerCache({\n defaultHeight: 150,\n defaultWidth: 150,\n fixedWidth: true\n });\n\n this._columnHeights = {};\n\n this.state = {\n columnWidth: 150,\n height: 150,\n gutterSize: 5,\n windowScrollerEnabled: true\n };\n\n\n this._cellRenderer = this._cellRenderer.bind(this);\n this._onResize = this._onResize.bind(this);\n this._renderAutoSizer = this._renderAutoSizer.bind(this);\n this._renderMasonry = this._renderMasonry.bind(this);\n this._setMasonryRef = this._setMasonryRef.bind(this);\n }\n\n render() {\n const {\n columnWidth,\n height,\n gutterSize,\n windowScrollerEnabled\n } = this.state;\n\n let child;\n\n if (windowScrollerEnabled) {\n child = (\n \n {this._renderAutoSizer}\n \n );\n } else {\n child = this._renderAutoSizer({ height });\n }\n\n return (\n
{child}
\n );\n\n }\n\n _calculateColumnCount() {\n const { columnWidth, gutterSize } = this.state;\n\n this._columnCount = Math.floor(this._width / (columnWidth + gutterSize));\n }\n\n _cellRenderer({ index, key, parent, style }) {\n const { columnWidth } = this.state;\n if (typeof(this.props.photos[index])=='string') {\n console.log('rendering month card')\n return (\n \n \n \n \n\n \n \n )\n }\n else if (typeof(this.props.photos[index])=='object'){\n return (\n \n \n \n \n\n \n \n );\n }\n }\n\n _initCellPositioner() {\n if (typeof this._cellPositioner === \"undefined\") {\n const { columnWidth, gutterSize } = this.state;\n\n this._cellPositioner = createMasonryCellPositioner({\n cellMeasurerCache: this._cache,\n columnCount: this._columnCount,\n columnWidth,\n spacer: gutterSize\n });\n }\n }\n\n _onResize({ width }) {\n this._width = width;\n\n this._columnHeights = {};\n this._calculateColumnCount();\n this._resetCellPositioner();\n this._masonry.recomputeCellPositions();\n }\n\n _renderAutoSizer({ height, scrollTop }) {\n this._height = height;\n this._scrollTop = scrollTop;\n\n return (\n \n {this._renderMasonry}\n \n );\n }\n\n _renderMasonry({ width }) {\n this._width = width;\n\n this._calculateColumnCount();\n this._initCellPositioner();\n\n const { height, windowScrollerEnabled } = this.state;\n return (\n
\n \n
\n );\n }\n\n _resetCellPositioner() {\n const { columnWidth, gutterSize } = this.state;\n\n this._cellPositioner.reset({\n columnCount: this._columnCount,\n columnWidth,\n spacer: gutterSize\n });\n }\n\n _setMasonryRef(ref) {\n this._masonry = ref;\n }\n}\n\n\nPhotosListCardView = connect((store)=>{\n return {\n fetchedPhotos: store.photos.fetchedPhotos,\n fetchingPhotosfetchedPhotos: store.photos.fetchingPhotos,\n photos: store.photos.photos,\n }\n})(PhotosListCardView)\n\n" }, { "path": "src/layouts/favoriteAutoAlbums.js", "content": "import React, { Component } from 'react';\nimport { connect } from \"react-redux\";\nimport {fetchPeopleAlbums, fetchAutoAlbums, generateAutoAlbums, fetchAutoAlbumsList} from '../actions/albumsActions'\nimport {AlbumAutoCard, AlbumAutoGallery} from '../components/album'\nimport {Container, Icon, Header, Button, Card, Label, Popup, Divider} from 'semantic-ui-react'\nimport {Server, serverAddress} from '../api_client/apiClient'\n\nexport class FavoriteAutoAlbumsView extends Component {\n\tconstructor(props){\n\t\tsuper(props)\n\t\tthis.filterFavoriteAutoAlbums = this.filterFavoriteAutoAlbums.bind(this)\n\t}\n\n\tcomponentWillMount(){\n\t\tif (this.props.albumsAutoList.length==0){\n\t\t\tthis.props.dispatch(fetchAutoAlbumsList())\n\t\t} \n\t}\n\n\tfilterFavoriteAutoAlbums(){\n\t\tvar favoriteAutoAlbums = this.props.albumsAutoList.filter(function(album){\n\t\t\tif (album.favorited){\n\t\t\t\treturn true\n\t\t\t}\n\t\t\telse {\n\t\t\t\treturn false\n\t\t\t}\n\t\t})\n\t\treturn favoriteAutoAlbums\n\t}\n\n\n\n\trender() {\n\t\tvar favoriteAutoAlbums = this.filterFavoriteAutoAlbums()\n\t\tconsole.log(favoriteAutoAlbums)\n\n\t\tvar match = this.props.match\n\t\tvar mappedFavoriteAutoAlbumCard = favoriteAutoAlbums.map(function(album){\n var albumTitle = album.title\n var albumDate = album.timestamp.split('T')[0]\n try {\n var albumCoverURL = album.cover_photo_url\n }\n catch(err) {\n console.log(err)\n var albumCoverURL = null\n }\n\t\t\treturn (\n \n\t\t\t)\n\t\t})\n\t\treturn (\n\t\t\t\n
\n \n \n \n \n
\n
\n \n Favorite Events\n View your favorite automatically generated event albums\n {mappedFavoriteAutoAlbumCard.length} Favorites\n \n
\n\t\t\t\t\n\t\t\t\t\t{mappedFavoriteAutoAlbumCard}\n\t\t\t\t\n\t\t\t\n\t\t)\n\t}\n}\n\n\n\nFavoriteAutoAlbumsView = connect((store)=>{\n return {\n albumsAuto: store.albums.albumsAuto,\n fetchingAlbumsAuto: store.albums.fetchingAlbumsAuto,\n fetchedAlbumsAuto: store.albums.fetchedAlbumsAuto,\n \n albumsAutoList: store.albums.albumsAutoList,\n fetchingAlbumsAutoList: store.albums.fetchingAlbumsAutoList,\n fetchedAlbumsAutoList: store.albums.fetchedAlbumsAutoList,\n\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n generatedAlbumsAuto: store.albums.generatedAlbumsAuto,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n statusPhotoScan: store.util.statusPhotoScan,\n scanningPhotos: store.photos.scanningPhotos,\n\n }\n})(FavoriteAutoAlbumsView)\n" }, { "path": "src/layouts/loginPage.js", "content": "import React, { Component } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n Button,\n Divider,\n Form,\n Header,\n Image,\n Message,\n Segment\n} from \"semantic-ui-react\";\n\nconst options = [\n { key: \"https://\", text: \"https://\", value: \"https://\" },\n { key: \"http://\", text: \"http://\", value: \"http://\" }\n];\n\nexport class LoginPage extends Component {\n constructor(props) {\n super(props);\n this.onSubmit = this.onSubmit.bind(this);\n this.handleServerProtocolChange = this.handleServerProtocolChange.bind(\n this\n );\n }\n\n state = {\n username: \"\",\n password: \"\",\n serverAddress: \"\",\n serverProtocol: \"https://\"\n };\n componentDidMount() {\n this.props.fetchSiteSettings()\n }\n\n handleChange = (e, { name, value }) => this.setState({ [name]: value });\n\n handleServerProtocolChange = (e, { name, value }) =>\n this.setState({ serverProtocol: value });\n\n onSubmit(event) {\n event.preventDefault();\n this.props.onSubmit(this.state.username.toLowerCase(), this.state.password);\n }\n\n render() {\n\n const { username, password, serverAddress } = this.state;\n\n return (\n \n
\n
\n \n Ownphotos\n
\n \n
Login
\n\n
\n \n \n \n \n \n \n \n \n \n\n {\n this.props.siteSettings.allow_registration &&\n
\n \n \n
\n }\n\n\n \n
\n \n {this.props.errors &&\n this.props.errors.data && (\n \n {this.props.errors.data.non_field_errors[0]}\n \n )}\n {this.props.errors &&\n this.props.errors.non_field_errors && (\n \n No connection to backend server\n \n )}\n {this.props.errors &&\n this.props.errors.password && (\n \n Password may not be blank!\n \n )}\n {this.props.errors &&\n this.props.errors.username && (\n \n Username may not be blank!\n \n )}\n
\n \n A comfy place for your photos.\n \n \n );\n }\n}\n\n// \n// \n// \n// }\n// placeholder='ownphotos.example.com'\n// name='serverAddress'\n// value={serverAddress}\n// onChange={this.handleChange} />\n// \n" }, { "path": "src/layouts/menubars.js", "content": "import _ from \"lodash\";\nimport React, { Component } from \"react\";\nimport { connect } from \"react-redux\";\nimport { Link } from \"react-router-dom\";\nimport { push } from \"react-router-redux\";\nimport {\n Button,\n Divider,\n Dropdown,\n Header,\n Icon,\n Image,\n Input,\n Menu,\n Popup,\n Segment,\n Sidebar,\n Progress,\n} from \"semantic-ui-react\";\nimport {\n fetchPeopleAlbums,\n fetchPlaceAlbum,\n fetchPlaceAlbumsList,\n fetchThingAlbumsList,\n fetchUserAlbum,\n fetchUserAlbumsList,\n} from \"../actions/albumsActions\";\nimport { logout } from \"../actions/authActions\";\nimport { fetchPeople } from \"../actions/peopleActions\";\nimport {\n searchPeople,\n searchPhotos,\n searchPlaceAlbums,\n searchThingAlbums,\n} from \"../actions/searchActions\";\nimport { toggleSidebar } from \"../actions/uiActions\";\nimport {\n fetchCountStats,\n fetchExampleSearchTerms,\n fetchWorkerAvailability,\n} from \"../actions/utilActions\";\nimport { serverAddress } from \"../api_client/apiClient\";\nimport { SecuredImageJWT } from \"../components/SecuredImage\";\n\nvar ENTER_KEY = 13;\nvar topMenuHeight = 45; // don't change this\n\nfunction fuzzy_match(str, pattern) {\n if (pattern.split(\"\").length > 0) {\n pattern = pattern.split(\"\").reduce(function (a, b) {\n return a + \".*\" + b;\n });\n return new RegExp(pattern).test(str);\n } else {\n return false;\n }\n}\n\nexport class TopMenuPublic extends Component {\n render() {\n return (\n
\n \n \n \n {\n this.props.dispatch(toggleSidebar());\n }}\n name={\"sidebar\"}\n />\n \n \n \n \n \n\n \n {\n this.props.dispatch({\n type: \"SET_GRID_TYPE\",\n payload: \"dense\",\n });\n }}\n icon\n active={this.props.gridType === \"dense\"}\n >\n \n \n {\n this.props.dispatch({\n type: \"SET_GRID_TYPE\",\n payload: \"loose\",\n });\n }}\n icon\n active={this.props.gridType === \"loose\"}\n >\n \n \n \n\n \n \n \n \n
\n );\n }\n}\n\nexport class TopMenu extends Component {\n state = {\n searchText: \"\",\n warningPopupOpen: false,\n showEmptyQueryWarning: false,\n width: window.innerWidth,\n exampleSearchTerm: \"Search...\",\n searchBarFocused: false,\n filteredExampleSearchTerms: [],\n filteredSuggestedPeople: [],\n };\n\n constructor(props) {\n super(props);\n this.handleSearch = this.handleSearch.bind(this);\n this.handleChange = this.handleChange.bind(this);\n this.handleResize = this.handleResize.bind(this);\n this._handleKeyDown = this._handleKeyDown.bind(this);\n this.filterSearchSuggestions = this.filterSearchSuggestions.bind(this);\n }\n\n handleResize() {\n this.setState({ width: window.innerWidth });\n }\n\n componentDidMount() {\n this.props.dispatch(fetchPeople());\n this.props.dispatch(fetchPlaceAlbumsList());\n this.props.dispatch(fetchThingAlbumsList());\n this.props.dispatch(fetchUserAlbumsList());\n this.props.dispatch(fetchExampleSearchTerms());\n this.props.dispatch(fetchCountStats());\n window.addEventListener(\"resize\", this.handleResize.bind(this));\n this.exampleSearchTermCylcer = setInterval(() => {\n this.setState({\n exampleSearchTerm:\n \"Search \" +\n this.props.exampleSearchTerms[\n Math.floor(Math.random() * this.props.exampleSearchTerms.length)\n ],\n });\n }, 5000);\n\n var _dispatch = this.props.dispatch;\n this.setState({ dispatch: _dispatch });\n var intervalId = setInterval(() => {\n _dispatch(fetchWorkerAvailability(this.props.workerRunningJob));\n }, 2000);\n this.setState({ intervalId: intervalId });\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.searchText.trim().length === 0) {\n var filteredExampleSearchTerms = [];\n var filteredSuggestedPeople = [];\n var filteredSuggestedPlaces = [];\n var filteredSuggestedThings = [];\n var filteredSuggestedUserAlbums = [];\n } else {\n filteredExampleSearchTerms = nextProps.exampleSearchTerms.filter((el) =>\n fuzzy_match(el.toLowerCase(), prevState.searchText.toLowerCase())\n );\n filteredSuggestedPeople = nextProps.people.filter((person) =>\n fuzzy_match(\n person.text.toLowerCase(),\n prevState.searchText.toLowerCase()\n )\n );\n filteredSuggestedPlaces = nextProps.albumsPlaceList.filter((place) =>\n fuzzy_match(\n place.title.toLowerCase(),\n prevState.searchText.toLowerCase()\n )\n );\n filteredSuggestedThings = nextProps.albumsThingList.filter((thing) =>\n fuzzy_match(\n thing.title.toLowerCase(),\n prevState.searchText.toLowerCase()\n )\n );\n filteredSuggestedUserAlbums = nextProps.albumsUserList.filter((album) =>\n fuzzy_match(\n album.title.toLowerCase(),\n prevState.searchText.toLowerCase()\n )\n );\n }\n return {\n ...prevState,\n filteredSuggestedPeople,\n filteredExampleSearchTerms,\n filteredSuggestedPlaces,\n filteredSuggestedThings,\n filteredSuggestedUserAlbums,\n };\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"resize\", this.handleResize.bind(this));\n clearInterval(this.state.intervalId);\n }\n\n _handleKeyDown(event) {\n switch (event.keyCode) {\n case ENTER_KEY:\n this.props.dispatch(searchPhotos(this.state.searchText));\n this.props.dispatch(push(\"/search\"));\n break;\n default:\n break;\n }\n }\n\n filterSearchSuggestions() {\n if (this.state.searchText.trim().length === 0) {\n var filteredExampleSearchTerms = [];\n var filteredSuggestedPeople = [];\n var filteredSuggestedPlaces = [];\n var filteredSuggestedThings = [];\n var filteredSuggestedUserAlbums = [];\n } else {\n filteredExampleSearchTerms = this.props.exampleSearchTerms.filter((el) =>\n fuzzy_match(el.toLowerCase(), this.state.searchText.toLowerCase())\n );\n filteredSuggestedPeople = this.props.people.filter((person) =>\n fuzzy_match(\n person.text.toLowerCase(),\n this.state.searchText.toLowerCase()\n )\n );\n filteredSuggestedPlaces = this.props.albumsPlaceList.filter((place) =>\n fuzzy_match(\n place.title.toLowerCase(),\n this.state.searchText.toLowerCase()\n )\n );\n filteredSuggestedThings = this.props.albumsThingList.filter((thing) =>\n fuzzy_match(\n thing.title.toLowerCase(),\n this.state.searchText.toLowerCase()\n )\n );\n filteredSuggestedUserAlbums = this.props.albumsUserList.filter((album) =>\n fuzzy_match(\n album.title.toLowerCase(),\n this.state.searchText.toLowerCase()\n )\n );\n }\n this.setState({\n filteredSuggestedPeople,\n filteredExampleSearchTerms,\n filteredSuggestedPlaces,\n filteredSuggestedThings,\n filteredSuggestedUserAlbums,\n });\n }\n\n handleSearch(e, d) {\n if (this.state.searchText.length > 0) {\n this.props.dispatch(searchPhotos(this.state.searchText));\n this.props.dispatch(searchPeople(this.state.searchText));\n this.props.dispatch(searchThingAlbums(this.state.searchText));\n this.props.dispatch(searchPlaceAlbums(this.state.searchText));\n this.props.dispatch(push(\"/search\"));\n } else {\n this.setState({ warningPopupOpen: true, showEmptyQueryWarning: true });\n this.timeout = setTimeout(() => {\n this.setState({ warningPopupOpen: false, showEmptyQueryWarning: true });\n }, 2500);\n }\n }\n\n handleChange(e, d) {\n this.state.searchText = d.value;\n this.filterSearchSuggestions();\n }\n\n render() {\n var searchBarWidth =\n this.state.width > 600 ? this.state.width - 200 : this.state.width - 220;\n var searchBarWidth = this.state.width - 300;\n\n const {\n filteredSuggestedUserAlbums,\n filteredExampleSearchTerms,\n filteredSuggestedPeople,\n filteredSuggestedPlaces,\n filteredSuggestedThings,\n } = this.state;\n\n let runningJobPopupProgress = null;\n if (\n this.props.workerRunningJob &&\n this.props.workerRunningJob.result &&\n this.props.workerRunningJob.result.progress\n ) {\n runningJobPopupProgress = (\n
\n \n Running {this.props.workerRunningJob.job_type_str} ...\n \n
\n );\n }\n\n return (\n
\n \n \n \n {\n this.props.dispatch(toggleSidebar());\n }}\n name={\"sidebar\"}\n />\n \n \n \n \n \n\n \n \n {\n this.setState({ searchBarFocused: true });\n }}\n onBlur={() => {\n _.debounce(() => {\n this.setState({ searchBarFocused: false });\n }, 200)();\n }}\n onKeyDown={(event) => {\n switch (event.keyCode) {\n case ENTER_KEY:\n this.props.dispatch(searchPhotos(this.state.searchText));\n this.props.dispatch(push(\"/search\"));\n this.setState({searchBarFocused: false});\n break;\n default:\n break;\n }\n }}\n onChange={this.handleChange}\n action={{\n icon: \"search\",\n color: \"blue\",\n loading: this.props.searchingPhotos,\n onClick: this.handleSearch,\n }}\n placeholder={this.state.exampleSearchTerm}\n />\n \n \n \n }\n position=\"bottom center\"\n content={\n this.props.workerAvailability\n ? \"Worker available! You can start scanning more photos, infer face labels, auto create event albums, or regenerate auto event album titles.\"\n : !this.props.workerAvailability &&\n this.props.workerRunningJob\n ? runningJobPopupProgress\n : \"Busy...\"\n }\n />\n\n \n \n \n Logged in as {this.props.auth.access.name}\n \n this.props.dispatch(logout())}>\n \n Logout\n \n this.props.dispatch(push(\"/settings\"))}\n >\n \n Settings\n \n {this.props.auth.access.is_admin && }\n\n {this.props.auth.access.is_admin && (\n this.props.dispatch(push(\"/admin\"))}\n >\n \n Admin Area\n \n )}\n \n \n \n \n \n {this.state.searchBarFocused && (\n \n
\n Search Suggestions\n
\n {filteredExampleSearchTerms.length > 0 && (\n \n \n
\n {filteredExampleSearchTerms.slice(0, 10).map((el) => {\n return (\n {\n this.props.dispatch(searchPhotos(el));\n this.props.dispatch(searchPeople(el));\n this.props.dispatch(searchThingAlbums(el));\n this.props.dispatch(searchPlaceAlbums(el));\n this.props.dispatch(push(\"/search\"));\n }}\n >\n \n {el}\n

\n );\n })}\n
\n
\n \n )}\n {filteredSuggestedUserAlbums.length > 0 && (\n
\n My Albums\n
\n )}\n {filteredSuggestedUserAlbums.length > 0 && (\n \n \n
\n {filteredSuggestedUserAlbums.slice(0, 10).map((album) => {\n return (\n {\n this.props.dispatch(push(`/useralbum/${album.id}`));\n this.props.dispatch(fetchUserAlbum(album.id));\n }}\n >\n \n {album.title}\n

\n );\n })}\n
\n
\n \n )}\n\n {filteredSuggestedPlaces.length > 0 && (\n
\n Places\n
\n )}\n {filteredSuggestedPlaces.length > 0 && (\n \n \n
\n {filteredSuggestedPlaces.slice(0, 10).map((place) => {\n return (\n {\n this.props.dispatch(push(`/place/${place.id}`));\n this.props.dispatch(fetchPlaceAlbum(place.id));\n }}\n >\n \n {place.title}\n

\n );\n })}\n
\n
\n \n )}\n\n {filteredSuggestedThings.length > 0 && (\n
\n Things\n
\n )}\n {filteredSuggestedThings.length > 0 && (\n \n \n
\n {filteredSuggestedThings.slice(0, 10).map((thing) => {\n return (\n {\n this.props.dispatch(push(`/search`));\n this.props.dispatch(searchPhotos(thing.title));\n }}\n >\n \n {thing.title}\n

\n );\n })}\n
\n
\n \n )}\n\n {filteredSuggestedPeople.length > 0 && (\n
\n People\n
\n )}\n {filteredSuggestedPeople.length > 0 && (\n \n \n \n {filteredSuggestedPeople.map((person) => {\n return (\n {\n this.props.dispatch(\n push(`/person/${person.key}`)\n );\n this.props.dispatch(\n fetchPeopleAlbums(person.key)\n );\n }}\n height={50}\n width={50}\n circular\n src={serverAddress + person.face_url}\n />\n }\n />\n );\n })}\n \n
\n \n )}\n\n
\n \n Favorites\n \n
\n
\n \n Hidden\n \n
\n
\n )}\n
\n );\n }\n}\n\nexport class SideMenuNarrowPublic extends Component {\n render() {\n return (\n \n
\n\n \n
Nextcloud
\n\n \n \n \n Credentials\n }\n content=\"Use application password\"\n />\n \n\n \n
\n \n {\n this.setState({\n userSelfDetails: {\n ...this.state.userSelfDetails,\n nextcloud_server_address: d.value,\n },\n });\n console.log(d.value);\n }}\n label=\"Server address\"\n placeholder=\"https://...\">\n \n \n {\n this.setState({\n userSelfDetails: {\n ...this.state.userSelfDetails,\n nextcloud_username: d.value,\n },\n });\n console.log(d.value);\n }}\n label=\"User name\"\n placeholder=\"User name\">\n \n \n {\n this.setState({\n userSelfDetails: {\n ...this.state.userSelfDetails,\n nextcloud_app_password: d.value,\n },\n });\n console.log(d.value);\n }}\n type=\"password\"\n label=\"Nextcloud App Password\"\n placeholder=\"Nextcloud App Password\"\n />\n \n
{' '}\n
\n {\n const ud = this.state.userSelfDetails;\n delete ud['scan_directory'];\n this.props.dispatch(updateUser(ud));\n }}\n size=\"small\"\n color=\"blue\"\n floated=\"left\">\n Update Nextcloud credentials\n \n {\n this.setState({\n userSelfDetails: this.props.userSelfDetails,\n });\n }}\n size=\"small\"\n basic\n floated=\"right\">\n Cancel\n \n
\n \n \n \n \n Nextcloud Scan Directory\n \n }\n inverted\n position=\"right center\"\n content={\n this.props.fetchedNextcloudDirectoryTree\n ? 'Logged into Nextcloud'\n : 'Not logged into Nextcloud'\n }\n />\n \n\n \n \n \n {\n this.setState({modalNextcloudScanDirectoryOpen: true});\n }}\n type=\"submit\">\n Change\n \n \n \n \n \n\n \n
Appearance
\n\n \n \n \n Thumbnail size\n \n\n \n
\n \n \n \n this.props.dispatch({\n type: 'SET_GRID_TYPE',\n payload: 'loose',\n })\n }\n checked={this.props.gridType === 'loose'}\n />\n \n \n \n this.props.dispatch({\n type: 'SET_GRID_TYPE',\n payload: 'dense',\n })\n }\n checked={this.props.gridType === 'dense'}\n />\n \n \n
\n \n \n \n\n \n
Library
\n\n \n
\n );\n }\n}\n\nconst modalStyles = {\n content: {\n top: 50,\n left: 50,\n right: 50,\n height: window.innerHeight - 100,\n\n overflow: 'hidden',\n // paddingRight:0,\n // paddingBottomt:0,\n // paddingLeft:10,\n // paddingTop:10,\n padding: 0,\n backgroundColor: 'white',\n },\n overlay: {\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n position: 'fixed',\n borderRadius: 0,\n border: 0,\n zIndex: 102,\n backgroundColor: 'rgba(200,200,200,0.8)',\n },\n};\n\nclass ModalNextcloudScanDirectoryEdit extends Component {\n constructor(props) {\n super(props);\n this.state = {newScanDirectory: '', treeData: []};\n this.nodeClicked = this.nodeClicked.bind(this);\n this.inputRef = React.createRef();\n }\n\n static getDerivedStateFromProps(nextProps, prevState) {\n if (prevState.treeData.length === 0) {\n return {...prevState, treeData: nextProps.nextcloudDirectoryTree};\n } else {\n return prevState;\n }\n }\n\n nodeClicked(event, rowInfo) {\n console.log(rowInfo);\n this.inputRef.current.inputRef.value = rowInfo.node.absolute_path;\n this.setState({newScanDirectory: rowInfo.node.absolute_path});\n }\n\n render() {\n console.log(this.props.userToEdit);\n return (\n {\n this.props.onRequestClose();\n this.setState({newScanDirectory: ''});\n }}\n style={modalStyles}\n onAfterOpen={() => {\n this.props.dispatch(fetchNextcloudDirectoryTree('/'));\n }}>\n
\n
Set your Nextcloud scan directory
\n
\n
\n
Current Nextcloud scan directory
\n
\n
\n \n \n {\n const newUserData = {\n ...this.props.userToEdit,\n nextcloud_scan_directory: this.state.newScanDirectory,\n };\n console.log(newUserData);\n const ud = newUserData;\n delete ud['scan_directory'];\n this.props.dispatch(updateUser(ud));\n this.props.onRequestClose();\n }}>\n Update\n \n {\n this.props.onRequestClose();\n }}>\n Cancel\n \n \n
\n \n
\n
Choose a directory from below
\n
\n \n false}\n canDrop={() => false}\n treeData={this.state.treeData}\n onChange={treeData => this.setState({treeData})}\n theme={FileExplorerTheme}\n generateNodeProps={rowInfo => {\n let nodeProps = {\n onClick: event => this.nodeClicked(event, rowInfo),\n };\n if (this.state.selectedNodeId === rowInfo.node.id) {\n nodeProps.className = 'selected-node';\n }\n return nodeProps;\n }}\n />\n \n \n );\n }\n}\n\nclass JobList extends Component {\n componentDidMount() {\n if (this.props.auth.access.is_admin) {\n this.props.dispatch(fetchJobList());\n }\n }\n\n render() {\n return (\n
\n \n \n \n Finished\n Failed\n Job Type\n Time Started\n Time Finished\n Duration\n Started By\n \n \n \n {this.props.jobList.map(job => {\n return (\n \n {job.finished ? 'true' : 'false'}\n \n {job.finished\n ? job.failed\n ? 'true'\n : 'false'\n : 'stil running...'}\n \n {job.job_type_str}\n \n {moment(job.started_at).format('YYYY-MM-DD') +\n ' (' +\n moment(job.started_at).fromNow() +\n ')'}\n \n \n {job.finished_at\n ? moment(job.finished_at).format('YYYY-MM-DD') +\n ' (' +\n moment(job.finished_at).fromNow() +\n ')'\n : 'still running...'}\n \n \n {job.finished\n ? moment\n .duration(\n moment(job.finished_at) - moment(job.started_at),\n )\n .humanize()\n : 'still running...'}\n \n {job.started_by.username}\n \n );\n })}\n \n
\n
\n );\n }\n}\n\nJobList = connect(store => {\n return {\n auth: store.auth,\n jobList: store.util.jobList,\n fetchingJobList: store.util.fetchingJobList,\n fetchedJobList: store.util.fetchedJobList,\n };\n})(JobList);\n\nModalNextcloudScanDirectoryEdit = connect(store => {\n return {\n auth: store.auth,\n\n nextcloudDirectoryTree: store.util.nextcloudDirectoryTree,\n fetchingNextcloudDirectoryTree: store.util.fetchingNextcloudDirectoryTree,\n fetchedNextcloudDirectoryTree: store.util.fetchedNextcloudDirectoryTree,\n\n userList: store.util.userList,\n fetchingUSerList: store.util.fetchingUserList,\n fetchedUserList: store.util.fetchedUserList,\n };\n})(ModalNextcloudScanDirectoryEdit);\n\nSettings = connect(store => {\n return {\n auth: store.auth,\n util: store.util,\n gridType: store.ui.gridType,\n siteSettings: store.util.siteSettings,\n statusPhotoScan: store.util.statusPhotoScan,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n generatingAutoAlbums: store.util.generatingAutoAlbums,\n scanningPhotos: store.photos.scanningPhotos,\n fetchedCountStats: store.util.fetchedCountStats,\n workerAvailability: store.util.workerAvailability,\n fetchedNextcloudDirectoryTree: store.util.fetchedNextcloudDirectoryTree,\n userSelfDetails: store.user.userSelfDetails,\n };\n})(Settings);\n" }, { "path": "src/layouts/statistics.js", "content": "import React, {Component} from 'react'\nimport { Popup, Segment, Grid, Image, Icon, Header, Container, Divider, Button, Loader, Menu} from 'semantic-ui-react'\nimport { connect } from \"react-redux\";\n\nimport {fetchCountStats,fetchPhotoScanStatus,fetchWordCloud,\n fetchAutoAlbumProcessingStatus} from '../actions/utilActions'\nimport {scanPhotos,fetchPhotos} from '../actions/photosActions'\n\nimport CountryPiChart from '../components/charts/countryPiChart'\nimport {CountStats} from '../components/statistics'\nimport WordCloud from '../components/charts/wordCloud'\nimport {LocationLink} from '../components/locationLink'\n\nimport {AllPhotosMap, EventMap, LocationClusterMap} from '../components/maps'\nimport EventCountMonthGraph from '../components/eventCountMonthGraph'\nimport LocationDurationStackedBar from '../components/locationDurationStackedBar'\n\nimport FaceClusterScatter from '../components/faceClusterGraph'\nimport SocialGraph from '../components/socialGraph'\nimport LazyLoad from 'react-lazyload';\n\nexport class Statistics extends Component {\n\n state = { activeItem: 'map' }\n\n handleItemClick = (e, { name }) => this.setState({ activeItem: name })\n\n // componentDidMount() {\n // var _dispatch = this.props.dispatch\n // this.setState({dispatch:_dispatch})\n // var intervalId = setInterval(function(){\n // _dispatch(fetchPhotoScanStatus())\n // _dispatch(fetchAutoAlbumProcessingStatus())\n // },2000\n // )\n // this.setState({intervalId:intervalId})\n // }\n\n // componentWillUnmount() {\n // clearInterval(this.state.intervalId)\n // }\n\n // onPhotoScanButtonClick = e => {\n // this.props.dispatch(scanPhotos())\n // }\n \n\n render() {\n const {activeItem} = this.state\n\n\n return (\n
\n\n \n\n
\n\n \n {this.setState({activeItem:'map'})}}/>\n }/>\n {this.setState({activeItem:'location tree'})}}/>\n }/>\n {this.setState({activeItem:'wordcloud'})}}/>\n }/>\n {this.setState({activeItem:'timeline'})}}/>\n }/>\n {this.setState({activeItem:'social graph'})}}/>\n }/>\n {this.setState({activeItem:'face clusters'})}}/>\n }/>\n \n\n
\n\n\n\n\n { activeItem==='location tree' && (\n
\n
\n )}\n\n { activeItem==='map' && (\n
\n \n
\n )}\n\n { activeItem==='wordcloud' && (\n
\n
\n )}\n\n { activeItem==='timeline' && (\n
\n
\n )}\n\n { activeItem==='social graph' && (\n
\n
\n )}\n\n { activeItem==='face clusters' && (\n
\n
\n )}\n
\n )\n }\n}\n\n\n\nStatistics = connect((store)=>{\n return {\n statusPhotoScan: store.util.statusPhotoScan,\n statusAutoAlbumProcessing: store.util.statusAutoAlbumProcessing,\n generatingAlbumsAuto: store.albums.generatingAlbumsAuto,\n scanningPhotos: store.photos.scanningPhotos,\n fetchedCountStats: store.util.fetchedCountStats,\n }\n})(Statistics)\n\n\n" }, { "path": "src/layouts/vigTest.js", "content": "import React, { Component} from \"react\";\n\nimport VirtualizedItemGrid from 'react-virtualized-item-grid';\nimport { Image } from 'semantic-ui-react';\nimport {Server, serverAddress} from '../api_client/apiClient'\n\nexport class MyList extends Component {\n itemRenderer(item) {\n console.log(item)\n return
;\n }\n\n render() {\n return (\n \n )\n }\n}\n\n" }, { "path": "src/middleware.js", "content": "import { isRSAA, apiMiddleware } from 'redux-api-middleware';\n\nimport { TOKEN_RECEIVED, refreshAccessToken } from './actions/authActions'\nimport { refreshToken, isAccessTokenExpired } from './reducers'\n\n\nexport function createApiMiddleware() {\n let postponedRSAAs = []\n\n return ({ dispatch, getState }) => {\n const rsaaMiddleware = apiMiddleware({dispatch, getState})\n\n return (next) => (action) => {\n const nextCheckPostoned = (nextAction) => {\n // Run postponed actions after token refresh\n if (nextAction.type === TOKEN_RECEIVED) {\n next(nextAction);\n postponedRSAAs.forEach((postponed) => {\n rsaaMiddleware(next)(postponed)\n })\n postponedRSAAs = []\n } else {\n next(nextAction)\n }\n }\n\n if(isRSAA(action)) {\n const state = getState(),\n token = refreshToken(state)\n\n if(token && isAccessTokenExpired(state)) {\n postponedRSAAs.push(action)\n if(postponedRSAAs.length === 1) {\n return rsaaMiddleware(nextCheckPostoned)(refreshAccessToken(token))\n } else {\n return\n }\n }\n\n return rsaaMiddleware(next)(action);\n }\n return next(action);\n }\n }\n}\n\nexport default createApiMiddleware();" }, { "path": "src/pig.js", "content": "(function(global) {\n 'use strict';\n\n /**\n * This is a manager for our resize handlers. You can add a callback, disable\n * all resize handlers, and re-enable handlers after they have been disabled.\n *\n * optimizedResize is adapted from Mozilla code:\n * https://developer.mozilla.org/en-US/docs/Web/Events/resize\n */\n var optimizedResize = (function() {\n var callbacks = [];\n var running = false;\n\n // fired on resize event\n function resize() {\n if (!running) {\n running = true;\n if (window.requestAnimationFrame) {\n window.requestAnimationFrame(runCallbacks);\n } else {\n setTimeout(runCallbacks, 66);\n }\n }\n }\n\n // run the actual callbacks\n function runCallbacks() {\n callbacks.forEach(function(callback) {\n callback();\n });\n\n running = false;\n }\n\n return {\n /**\n * Add a callback to be run on resize.\n *\n * @param {function} callback - the callback to run on resize.\n */\n add: function(callback) {\n if (!callbacks.length) {\n window.addEventListener('resize', resize);\n }\n\n callbacks.push(callback);\n },\n\n /**\n * Disables all resize handlers.\n */\n disable: function() {\n window.removeEventListener('resize', resize);\n },\n\n /**\n * Enables all resize handlers, if they were disabled.\n */\n reEnable: function() {\n window.addEventListener('resize', resize);\n }\n };\n }());\n\n /**\n * Inject CSS needed to make the grid work in the .\n *\n * @param {string} classPrefix - the prefix associated with this library that\n * should be prepended to classnames.\n * @param {string} containerId - ID of the container for the images.\n */\n function _injectStyle(containerId, classPrefix, transitionSpeed) {\n\n var css = (\n '#' + containerId + ' {' +\n ' position: relative;' +\n '}' +\n '.' + classPrefix + '-figure {' +\n ' background-color: #D5D5D5;' +\n ' overflow: hidden;' +\n ' left: 0;' +\n ' position: absolute;' +\n ' top: 0;' +\n ' margin: 0;' +\n '}' +\n '.' + classPrefix + '-figure img {' +\n ' left: 0;' +\n ' position: absolute;' +\n ' top: 0;' +\n ' height: 100%;' +\n ' width: 100%;' +\n ' opacity: 0;' +\n ' transition: ' + (transitionSpeed / 1000) + 's ease opacity;' +\n ' -webkit-transition: ' + (transitionSpeed / 1000) + 's ease opacity;' +\n '}' +\n '.' + classPrefix + '-figure img.' + classPrefix + '-thumbnail {' +\n ' -webkit-filter: blur(30px);' +\n ' filter: blur(30px);' +\n ' left: auto;' +\n ' position: relative;' +\n ' width: auto;' +\n '}' +\n '.' + classPrefix + '-figure img.' + classPrefix + '-loaded {' +\n ' opacity: 1;' +\n '}'\n );\n\n var head = document.head || document.getElementsByTagName(\"head\")[0];\n var style = document.createElement(\"style\");\n\n style.type = \"text/css\";\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n\n head.appendChild(style);\n }\n\n /**\n * Extend obj1 with each key in obj2, overriding default values in obj1 with\n * values in obj2\n *\n * @param {object} obj1 - The object to extend.\n * @param {object} obj2 - The overrides to apply onto obj1.\n */\n function _extend(obj1, obj2) {\n for (var i in obj2) {\n if (obj2.hasOwnProperty(i)) {\n obj1[i] = obj2[i];\n }\n }\n }\n\n /**\n * Returns the distance from `elem` to the top of the page. This is done by\n * walking up the node tree, getting the offsetTop of each parent node, until\n * the top of the page.\n *\n * @param {object} elem - The element to compute the offset of.\n **/\n function _getOffsetTop(elem){\n var offsetTop = 0;\n do {\n if (!isNaN(elem.offsetTop)){\n offsetTop += elem.offsetTop;\n }\n elem = elem.offsetParent;\n } while(elem);\n return offsetTop;\n }\n\n /**\n * Creates an instance of the progressive image grid, inserting boilerplate\n * CSS and loading image data. Instantiating an instance of the Pig class\n * does not cause any images to appear however. After instantiating, call the\n * `enable()` function on the returned instance:\n *\n * var pig = new Pig(imageData, opts);\n * pig.enable();\n *\n * @param {array} imageData - An array of metadata about each image to\n * include in the grid.\n * @param {string} imageData[0].filename - The filename of the image.\n * @param {string} imageData[0].aspectRatio - The aspect ratio of the image.\n * @param {object} options - An object containing overrides for the default\n * options. See below for the full list of options\n * and defaults.\n *\n * @returns {object} The Pig instance.\n */\n function Pig(imageData, options) {\n // Global State\n this.inRAF = false;\n this.isTransitioning = false;\n this.minAspectRatioRequiresTransition = false;\n this.minAspectRatio = null;\n this.latestYOffset = 0;\n this.lastWindowWidth = window.innerWidth;\n this.scrollDirection = 'down';\n\n // List of images that are loading or completely loaded on screen.\n this.visibleImages = [];\n\n // These are the default settings, which may be overridden.\n this.settings = {\n\n /**\n * Type: string\n * Default: 'pig'\n * Description: The class name of the element inside of which images should\n * be loaded.\n */\n containerId: 'pig',\n\n /**\n * Type: string\n * Default: 'pig'\n * Description: The prefix associated with this library that should be\n * prepended to class names within the grid.\n */\n classPrefix: 'pig',\n\n /**\n * Type: string\n * Default: 'figure'\n * Description: The tag name to use for each figure. The default setting is\n * to use a
tag.\n */\n figureTagName: 'figure',\n\n /**\n * Type: string\n * Default: 'group'\n * Description: The tag name to use for each group. The default setting is\n * to use a tag.\n */\n groupTagName: 'group',\n\n /**\n * Type: string\n * Default: 'groupheadline'\n * Description: The tag name to use for each group headline. The default setting is\n * to use a tag.\n */\n groupHeadlineTagName: 'groupheadline',\n\n /**\n * Type: boolean\n * Default: false\n * Description: Enables/disables the group headline, the default is false.\n */\n enableGroupHeadline: false,\n\n /**\n * Type: boolean\n * Default: false\n * Description: True: Start a new row per group.\n * False: Try to fit multiple groups into one row. If a group requires\n * more than one row, fallback to start with a new row for this group.\n */\n newRowPerGroup: true,\n\n /**\n * Type: number\n * Default: 'groupHeadlineHeight'\n * Description: The height of the group headline in pixel. The default is 48px.\n */\n groupHeadlineHeight: 48,\n\n /**\n * Get the HTML code for a group headline.\n *\n * @param {Number} groupid - The id of the group. This id is equal to the id given in the imageData.\n *\n * @returns {String} The HTML code for the group headline.\n */\n getGroupHeadlineHTML: function(groupid) {\n return '

' + groupid + '

';\n },\n\n /**\n * Type: Number\n * Default: 64\n * Description: Size in pixels of the gap between groups in one row. This setting is only used if enableGroupHeadline == true.\n */\n spaceBetweenGroups: 64,\n\n /**\n * Type: Number\n * Default: 8\n * Description: Size in pixels of the gap between images in the grid.\n */\n spaceBetweenImages: 8,\n\n /**\n * Type: Number\n * Default: 500\n * Description: Transition speed in milliseconds\n */\n transitionSpeed: 500,\n\n /**\n * Type: Number\n * Default: 3000\n * Description: Height in pixels of images to preload in the direction\n * that the user is scrolling. For example, in the default case, if the\n * user is scrolling down, 1000px worth of images will be loaded below\n * the viewport.\n */\n primaryImageBufferHeight: 1000,\n\n /**\n * Type: Number\n * Default: 100\n * Description: Height in pixels of images to preload in the direction\n * that the user is NOT scrolling. For example, in the default case, if\n * the user is scrolling down, 300px worth of images will be loaded\n * above the viewport. Images further up will be removed.\n */\n secondaryImageBufferHeight: 300,\n\n /**\n * Type: Number\n * Default: 20\n * Description: The height in pixels of the thumbnail that should be\n * loaded and blurred to give the effect that images are loading out of\n * focus and then coming into focus.\n */\n thumbnailSize: 20,\n\n /**\n * Get the URL for an image with the given filename & size.\n *\n * @param {string} filename - The filename of the image.\n * @param {Number} size - The size (height in pixels) of the image.\n *\n * @returns {string} The URL of the image at the given size.\n */\n urlForSize: function(filename, size) {\n return '/img/' + size + '/' + filename;\n },\n\n /**\n * Get the minimum required aspect ratio for a valid row of images. The\n * perfect rows are maintained by building up a row of images by adding\n * together their aspect ratios (the aspect ratio when they are placed\n * next to each other) until that aspect ratio exceeds the value returned\n * by this function. Responsive reordering is achieved through changes\n * to what this function returns at different values of the passed\n * parameter `lastWindowWidth`.\n *\n * @param {Number} lastWindowWidth - The last computed width of the\n * browser window.\n *\n * @returns {Number} The minimum aspect ratio at this window width.\n */\n getMinAspectRatio: function(lastWindowWidth) {\n if (lastWindowWidth <= 640)\n return 2;\n else if (lastWindowWidth <= 1280)\n return 4;\n else if (lastWindowWidth <= 1920)\n return 5;\n return 6;\n },\n\n /**\n * Get the image size (height in pixels) to use for this window width.\n * Responsive resizing of images is achieved through changes to what this\n * function returns at different values of the passed parameter\n * `lastWindowWidth`.\n *\n * @param {Number} lastWindowWidth - The last computed width of the\n * browser window.\n *\n * @returns {Number} The size (height in pixels) of the images to load.\n */\n getImageSize: function(lastWindowWidth) {\n if (lastWindowWidth <= 640)\n return 100;\n else if (lastWindowWidth <= 1920)\n return 250;\n return 500;\n }\n };\n\n // We extend the default settings with the provided overrides.\n _extend(this.settings, options || {});\n\n // Find the container to load images into, if it exists.\n this.container = document.getElementById(this.settings.containerId);\n if (!this.container) {\n console.error('Could not find element with ID ' + this.settings.containerId);\n }\n\n // Our global reference for images in the grid. Note that not all of these\n // images are necessarily in view or loaded.\n this.images = this._parseImageData(imageData);\n\n // Inject our boilerplate CSS.\n _injectStyle(this.settings.containerId, this.settings.classPrefix, this.settings.transitionSpeed);\n\n // Allows for chaining with `enable()`.\n return this;\n }\n\n /**\n * Because we may be transitioning a very large number of elements on a\n * resize, and because we cannot reliably determine when all elements are\n * done transitioning, we have to approximate the amount of time it will take\n * for the browser to be expected to complete with a transition. This\n * constant gives the scale factor to apply to the given transition time. For\n * example, if transitionTimeoutScaleFactor is 1.5 and transition speed is\n * given as 500ms, we will wait 750ms before assuming that we are actually\n * done resizing.\n *\n * @returns {Number} Time in milliseconds before we can consider a resize to\n * have been completed.\n */\n Pig.prototype._getTransitionTimeout = function() {\n var transitionTimeoutScaleFactor = 1.5;\n return this.settings.transitionSpeed * transitionTimeoutScaleFactor;\n };\n\n /**\n * Gives the CSS property string to set for the transition value, depending\n * on whether or not we are transitioning.\n *\n * @returns {string} a value for the `transition` CSS property.\n */\n Pig.prototype._getTransitionString = function() {\n if (this.isTransitioning) {\n return (this.settings.transitionSpeed / 1000) + 's transform ease';\n }\n\n return 'none';\n };\n\n /**\n * Computes the current value for `this.minAspectRatio`, using the\n * `getMinAspectRatio` function defined in the settings. Then,\n * `this.minAspectRatioRequiresTransition` will be set, depending on whether\n * or not the value of this.minAspectRatio has changed.\n */\n Pig.prototype._recomputeMinAspectRatio = function() {\n var oldMinAspectRatio = this.minAspectRatio;\n this.minAspectRatio = this.settings.getMinAspectRatio(this.lastWindowWidth);\n\n if (oldMinAspectRatio !== null && oldMinAspectRatio !== this.minAspectRatio)\n this.minAspectRatioRequiresTransition = true;\n else\n this.minAspectRatioRequiresTransition = false;\n };\n\n /**\n * Creates new instances of the ProgressiveImage class for each of the images\n * defined in `imageData`.\n *\n * @param {array} imageData - An array of metadata about each image to\n * include in the grid.\n * @param {string} imageData[0].filename - The filename of the image.\n * @param {string} imageData[0].aspectRatio - The aspect ratio of the image.\n *\n * @returns {Array[ProgressiveImage]} - An array of ProgressiveImage\n * instances that we created.\n */\n Pig.prototype._parseImageData = function(imageData) {\n var progressiveGroups = [];\n\n imageData.forEach(function(group, gindex) {\n var progressive_group = new ProgressiveGroup(group.groupid, gindex, this);\n\n group.images.forEach(function(image, index) {\n var progressiveImage = new ProgressiveImage(image, index, this, progressive_group);\n progressive_group.addImage(progressiveImage);\n }.bind(this));\n\n progressiveGroups.push(progressive_group);\n }.bind(this));\n\n return progressiveGroups;\n };\n /**\n * This computes the layout of the entire grid, setting the height, width,\n * translateX, translateY, and transtion values for each ProgessiveImage in\n * `this.images`. These styles are set on the ProgressiveImage.style property,\n * but are not set on the DOM.\n *\n * This separation of concerns (computing layout and DOM manipulation) is\n * paramount to the performance of the PIG. While we need to manipulate the\n * DOM every time we scroll (adding or remove images, etc.), we only need to\n * compute the layout of the PIG on load and on resize. Therefore, this\n * function will compute the entire grid layout but will not manipulate the\n * DOM at all.\n *\n * All DOM manipulation occurs in `_doLayout`.\n */\n Pig.prototype._computeLayout = function() {\n // Constants\n var wrapperWidth = parseInt(this.container.clientWidth);\n\n // State\n var row = []; // The list of images in the current row.\n var translateX = 0; // The current translateX value that we are at\n var translateY = 0; // The current translateY value that we are at\n var rowAspectRatio = 0; // The aspect ratio of the row we are building\n\n // Compute the minimum aspect ratio that should be applied to the rows.\n this._recomputeMinAspectRatio();\n\n // If we are not currently transitioning, and our minAspectRatio has just\n // changed, then we mark isTransitioning true. If this is the case, then\n // `this._getTransitionString()` will ensure that each image has a value\n // like \"0.5s ease all\". This will cause images to animate as they change\n // position. (They need to change position because the minAspectRatio has\n // changed.) Once we determine that the transtion is probably over (using\n // `this._getTransitionTimeout`) we unset `this.isTransitioning`, so that\n // future calls to `_computeLayout` will set \"transition: none\".\n if (!this.isTransitioning && this.minAspectRatioRequiresTransition) {\n this.isTransitioning = true;\n setTimeout(function() {\n this.isTransitioning = false;\n }, this._getTransitionTimeout());\n }\n\n // Get the valid-CSS transition string.\n var transition = this._getTransitionString();\n var rows = [];\n\n // Loop through all our images, building them up into rows and computing\n // the working rowAspectRatio.\n [].forEach.call(this.images, function(group, gindex) {\n var self = this;\n //either get the aspect ratio of the group or take a real big value\n var next_group_aspect_ratio = gindex + 1 < this.images.length ? this.images[gindex + 1].getAspectRatio() : 1000;\n\n [].forEach.call(group.images, function(image, index) {\n var self = this;\n rowAspectRatio += parseFloat(image.aspectRatio);\n row.push(image);\n\n\n var last_group_row = index + 1 === group.images.length;\n var last_global_row = last_group_row && gindex == this.images.length;\n // Either we have enabled a new row per group, the row aspect ratio\n // plus the next group aspect ratio is greater than the allowed aspect ratio\n // or the current row belongs to a group that occupies multiple rows\n var new_row_for_next_group = this.settings.newRowPerGroup ||\n (rowAspectRatio + next_group_aspect_ratio) >= this.minAspectRatio ||\n translateY !== 0;\n var out_of_images = last_global_row || (last_group_row && new_row_for_next_group);\n\n // When the rowAspectRatio exceeds the minimum acceptable aspect ratio,\n // or when we're out of images, we say that we have all the images we\n // need for this row, and compute the style values for each of these\n // images.\n if (rowAspectRatio >= this.minAspectRatio || out_of_images) {\n // count the number of groups in this row\n var groups_in_row = row.reduce(function (groups, current) {\n if (groups.indexOf(current.getGroupIndex()) === -1) {\n groups.push(current.getGroupIndex());\n }\n\n return groups;\n }, []).length;\n\n // Make sure that the last row also has a reasonable height\n rowAspectRatio = Math.max(rowAspectRatio, this.minAspectRatio);\n\n // Compute this row's height.\n var totalDesiredWidthOfImages = wrapperWidth - this.settings.spaceBetweenImages * (row.length - 1) -\n this.settings.spaceBetweenGroups * (groups_in_row - 1);\n var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;\n\n // For each image in the row, compute the width, height, translateX,\n // and translateY values, and set them (and the transition value we\n // found above) on each image.\n //\n // NOTE: This does not manipulate the DOM, rather it just sets the\n // style values on the ProgressiveImage instance. The DOM nodes\n // will be updated in _doLayout.\n var last_group_index = row[0].getGroupIndex();\n row.forEach(function(img) {\n var imageWidth = rowHeight * img.aspectRatio;\n\n // If we start with a new group in the row, reset the translateX\n if (last_group_index !== img.getGroupIndex()) {\n translateX = 0;\n last_group_index = img.getGroupIndex();\n }\n\n // This is NOT DOM manipulation.\n img.style = {\n width: parseInt(imageWidth),\n height: parseInt(rowHeight),\n translateX: translateX,\n translateY: translateY,\n transition: transition\n };\n\n // The next image is this.settings.spaceBetweenImages pixels to the\n // right of this image.\n translateX += imageWidth + this.settings.spaceBetweenImages;\n }.bind(self));\n\n rows.push(row);\n // Reset our state variables for next row.\n row = [];\n rowAspectRatio = 0;\n translateY += parseInt(rowHeight) + this.settings.spaceBetweenImages;\n translateX = 0;\n }\n }.bind(self));\n\n translateY = 0;\n }.bind(this));\n\n // Now we iterate over all generated rows and update the corresponding groups.\n // This means we set the width, height, top and left of each group.\n var group_top = 0;\n rows.forEach(function(row, rindex) {\n var seen_groups = [];\n var group_width = 0;\n var row_height = 0;\n var group_left = 0;\n var last_row = rindex + 1 === rows.length;\n var group_top_updated_for_row = false;\n var self = this;\n row.forEach(function(img, index) {\n var last_row_img = index + 1 === row.length + 1;\n var last_global_img = last_row_img && last_row;\n\n row_height = img.style.height + (last_row ? 0 : this.settings.spaceBetweenImages);\n\n // If we did not have seen this group in this row already, we have to set some variables:\n // First, we update the group_left value, if we got multiple groups per row, we need to move them\n // to the right, so that they do not overlap each other.\n // Second, we reset the group_width, because we start with a new group.\n // Third, we update the height of the group.\n if (seen_groups.indexOf(img.getGroupIndex()) === -1) {\n group_left += group_width + (group_width === 0 ? 0 : this.settings.spaceBetweenGroups - this.settings.spaceBetweenImages);\n group_width = 0;\n seen_groups.push(img.getGroupIndex());\n img.getGroup().style.height += row_height;\n }\n\n group_width += img.style.width + (last_row_img ? 0 : this.settings.spaceBetweenImages);\n\n img.getGroup().style.width = Math.max(img.getGroup().style.width, group_width);\n\n img.getGroup().style.left = group_left;\n\n // Now we need to update the group top value.\n // But, as we can have one group in multiple rows, we only want to update the top of the group once.\n // So, we first check that the current group top is equal to 0 and then we check that either we have group headlines enabled\n // or that the current group is not the first group.\n if (img.getGroup().style.top === 0 && (this.settings.groupHeadlineHeight || img.getGroupIndex() > 0)) {\n // We only update the group_top once per row, because when we have multiple groups in one row,\n // all should start at the same top.\n if (!group_top_updated_for_row) {\n group_top += (this.settings.enableGroupHeadline ? this.settings.groupHeadlineHeight : 0);\n group_top_updated_for_row = true;\n }\n\n img.getGroup().style.top = group_top;\n }\n }.bind(self));\n\n group_top += row_height;\n }.bind(this));\n\n // No space below the last image\n this.totalHeight = group_top - this.settings.spaceBetweenImages;\n };\n\n\n /**\n * Update the DOM to reflect the style values of each image in the PIG,\n * adding or removing images appropriately.\n *\n * PIG ensures that there are not too many images loaded into the DOM at once\n * by maintaining a buffer region around the viewport in which images are\n * allowed, removing all images below and above. Because all of our layout\n * is computed using CSS transforms, removing an image above the buffer will\n * not cause the gird to reshuffle.\n *\n * The primary buffer is the buffer in the direction of the user's scrolling.\n * (Below if they are scrolling down, above if they are scrolling up.) The\n * size of this buffer determines the experience of scrolling down the page.\n *\n * The secondary buffer is the buffer in the opposite direction of the user's\n * scrolling. The size of this buffer determines the experience of changing\n * scroll directions. (Too small, and we have to reload a ton of images above\n * the viewport if the user changes scroll directions.)\n *\n * While the entire grid has been computed, only images within the viewport,\n * the primary buffer, and the secondary buffer will exist in the DOM.\n *\n *\n * Illustration: the primary and secondary buffers\n *\n *\n * +---------------------------+\n * | |\n * | |\n * | |\n * | |\n * + - - - - - - - - - - - - - + -------\n * | | A\n * | Secondary Buffer | this.setting.secondaryImageBufferHeight\n * | | V\n * +---------------------------+ -------\n * | | A\n * | | |\n * | | |\n * | Viewport | window.innerHeight\n * | | |\n * | | |\n * | | V\n * +---------------------------+ -------\n * | | A\n * | | |\n * | | |\n * | | |\n * | Primary Buffer | this.settings.primaryImageBufferHeight\n * | | |\n * | | |\n * | | |\n * | | V\n * + - - - - - - - - - - - - - + -------\n * | |\n * | (Scroll direction) |\n * | | |\n * | | |\n * | V |\n * | |\n *\n */\n Pig.prototype._doLayout = function() {\n\n // Set the container height\n this.container.style.height = this.totalHeight + 'px';\n\n // Get the top and bottom buffers heights.\n var bufferTop =\n (this.scrollDirection === 'up') ?\n this.settings.primaryImageBufferHeight :\n this.settings.secondaryImageBufferHeight;\n var bufferBottom =\n (this.scrollDirection === 'down') ?\n this.settings.secondaryImageBufferHeight :\n this.settings.primaryImageBufferHeight;\n\n // Now we compute the location of the top and bottom buffers:\n var containerOffset = _getOffsetTop(this.container);\n var windowHeight = window.innerHeight;\n\n // This is the top of the top buffer. If the bottom of an image is above\n // this line, it will be removed.\n var minTranslateYPlusHeight = this.latestYOffset - containerOffset - bufferTop;\n\n // This is the bottom of the bottom buffer. If the top of an image is\n // below this line, it will be removed.\n var maxTranslateY = this.latestYOffset + windowHeight + bufferBottom;\n\n // Here, we loop over every image, determine if it is inside our buffers or\n // no, and either insert it or remove it appropriately.\n this.images.forEach(function(group) {\n group.updateVisibility(minTranslateYPlusHeight, maxTranslateY);\n }.bind(this));\n };\n\n /**\n * Create our onScroll handler and return it.\n *\n * @returns {function} Our optimized onScroll handler.\n */\n Pig.prototype._getOnScroll = function() {\n var _this = this;\n\n /**\n * This function is called on scroll. It computes variables about the page\n * position and scroll direction, and then calls a _doLayout guarded by a\n * window.requestAnimationFrame.\n *\n * We use the boolean variable _this.inRAF to ensure that we don't overload\n * the number of layouts we perform by starting another layout while we are\n * in the middle of doing one.\n *\n * @returns {function} The onScroll handler that we should attach.\n */\n var onScroll = function() {\n // Compute the scroll direction using the latestYOffset and the\n // previousYOffset\n var newYOffset = window.pageYOffset;\n _this.previousYOffset = _this.latestYOffset || newYOffset;\n _this.latestYOffset = newYOffset;\n _this.scrollDirection = (_this.latestYOffset > _this.previousYOffset) ? 'down' : 'up';\n\n // Call _this.doLayout, guarded by window.requestAnimationFrame\n if (!_this.inRAF) {\n _this.inRAF = true;\n window.requestAnimationFrame(function() {\n _this._doLayout();\n _this.inRAF = false;\n });\n }\n };\n\n return onScroll;\n };\n\n /**\n * Enable scroll and resize handlers, and run a complete layout computation /\n * application.\n *\n * @returns {object} The Pig instance, for easy chaining with the constructor.\n */\n Pig.prototype.enable = function() {\n this.onScroll = this._getOnScroll();\n window.addEventListener('scroll', this.onScroll);\n\n this.onScroll();\n this._computeLayout();\n this._doLayout();\n\n optimizedResize.add(function() {\n this.lastWindowWidth = window.innerWidth;\n this._computeLayout();\n this._doLayout();\n }.bind(this));\n\n return this;\n };\n\n /**\n * Remove all scroll and resize listeners.\n *\n * @returns {object} The Pig instance.\n */\n Pig.prototype.disable = function() {\n window.removeEventListener('scroll', this.onScroll);\n optimizedResize.disable();\n return this;\n };\n\n /**\n * This class manages a single group, a group contains one to multiple images.\n * It keeps track of the group's height, width, and position in the grid.\n *\n * However, this element may or may not actually exist in the DOM. The actual\n * DOM element may loaded and unloaded depending on where it is with respect\n * to the viewport. This class is responsible for managing the DOM elements.\n *\n * @param {number} groupid - This id is equal to the id given by the user in the image data.\n * @param {index} index - The index of the group in the pig.images array.\n * @param {object} pig - The pig instance.\n */\n function ProgressiveGroup(groupid, index, pig) {\n this.groupid = groupid;\n this.index = index;\n this.images = [];\n this.pig = pig;\n\n this.classNames = {\n group: pig.settings.classPrefix + '-group',\n headline: pig.settings.classPrefix + 'group-headline'\n };\n\n this.existsOnPage = false;\n\n if (pig.settings.enableGroupHeadline) {\n this.createHeadline();\n }\n\n this.style = {\n width: 0,\n height: 0,\n top: 0,\n left: 0\n };\n }\n\n /**\n * Adds an image to this group.\n */\n ProgressiveGroup.prototype.addImage = function(image) {\n this.images.push(image);\n };\n\n /**\n * Computes the aspect ratio of the whole group.\n *\n * @returns {number} The aspect ratio of this group.\n */\n ProgressiveGroup.prototype.getAspectRatio = function() {\n var aspect_ratio = 0.0;\n this.images.forEach(function(image) {\n aspect_ratio += parseFloat(image.aspectRatio);\n });\n\n return aspect_ratio;\n };\n\n /**\n * Returns the index of this group.\n *\n * @returns {number} The index of this group in the pig.images array.\n */\n ProgressiveGroup.prototype.getIndex = function() {\n return this.index;\n };\n\n /**\n * Checks if this group is currently visible/invisible in the viewport.\n * If the group is visible in the current viewport, the dom element is\n * added to the root dom element, otherwise the group dom element is removed.\n * This function also calls the updateVisibility function of all images, but\n * only if the group itself is visible.\n *\n * @param {number} miny - The top of the viewport.\n * @param {number} maxy - The bottom of the viewport.\n */\n ProgressiveGroup.prototype.updateVisibility = function(miny, maxy) {\n var top = this.style.top;\n var top_plus_height = this.style.height + top;\n\n if (this.headline) {\n top -= this.pig.settings.groupHeadlineHeight;\n }\n\n if (top <= maxy && top_plus_height >= miny) {\n this.load();\n this.images.forEach(function(img) { img.updateVisibility(miny - top, maxy - top); });\n } else {\n this.hide();\n }\n };\n\n /**\n * Get the DOM element associated with this ProgressiveGroup. We default to\n * using this.element, and we create it if it doesn't exist.\n *\n * @returns {HTMLElement} The DOM element associated with this instance.\n */\n ProgressiveGroup.prototype.getElement = function() {\n if (!this.element) {\n this.element = document.createElement(this.pig.settings.groupTagName);\n this.element.className = this.classNames.group;\n\n if (this.headline) {\n this.element.appendChild(this.headline);\n }\n\n this._updateStyles();\n }\n\n return this.element;\n };\n\n /**\n * Creates the headline for this group.\n */\n ProgressiveGroup.prototype.createHeadline = function() {\n if (!this.headline) {\n this.headline = document.createElement(this.pig.settings.groupHeadlineTagName);\n this.headline.className = this.classNames.headline;\n }\n };\n\n /**\n * Updates the style attribute to reflect this style property on this object.\n */\n ProgressiveGroup.prototype._updateStyles = function() {\n this.getElement().style.position = 'absolute';\n this.getElement().style.width = this.style.width + 'px';\n this.getElement().style.height = this.style.height + 'px';\n this.getElement().style.top = this.style.top + 'px';\n this.getElement().style.left = this.style.left + 'px';\n\n if (this.headline) {\n var height = this.pig.settings.groupHeadlineHeight;\n\n this.headline.style.minWidth = '100%';\n this.headline.style.height = height + 'px';\n this.headline.style.top = '-' + height + 'px';\n this.headline.innerHTML = this.pig.settings.getGroupHeadlineHTML(this.groupid);\n this.headline.style.position = 'absolute';\n }\n };\n\n /**\n * Loads this group into the DOM.\n */\n ProgressiveGroup.prototype.load = function() {\n if (!this.existsOnPage) {\n this.pig.container.appendChild(this.getElement());\n this._updateStyles();\n }\n\n this.existsOnPage = true;\n };\n\n /**\n * Unloads this group from the DOM.\n */\n ProgressiveGroup.prototype.hide = function() {\n if (this.existsOnPage) {\n this.pig.container.removeChild(this.getElement());\n }\n\n this.existsOnPage = false;\n };\n\n /**\n * This class manages a single image. It keeps track of the image's height,\n * width, and position in the grid. An instance of this class is associated\n * with a single image figure, which looks like this:\n *\n *
\n * \n * \n *
\n *\n * However, this element may or may not actually exist in the DOM. The actual\n * DOM element may loaded and unloaded depending on where it is with respect\n * to the viewport. This class is responsible for managing the DOM elements.\n *\n * This class also manages the blur-into-focus load effect. First, the\n *
element is inserted into the page. Then, a very small thumbnail\n * is loaded, stretched out to the full size of the image. This pixelated\n * image is then blurred using CSS filter: blur(). Then, the full image is\n * loaded, with opacity:0. Once it has loaded, it is given the `pig-loaded`\n * class, and its opacity is set to 1. This creates an effect where there is\n * first a blurred version of the image, and then it appears to come into\n * focus.\n *\n * @param {array} singleImageData - An array of metadata about each image to\n * include in the grid.\n * @param {string} singleImageData[0].filename - The filename of the image.\n * @param {string} singleImageData[0].aspectRatio - The aspect ratio of the\n * image.\n * @param {object} group - The group this image belongs to.\n */\n function ProgressiveImage(singleImageData, index, pig, group) {\n // Global State\n this.existsOnPage = false; // True if the element exists on the page.\n\n // Instance information\n this.aspectRatio = singleImageData.aspectRatio; // Aspect Ratio\n this.filename = singleImageData.filename; // Filename\n this.index = index; // The index in the list of images\n\n // The Pig instance\n this.pig = pig;\n\n // The group the image belongs to\n this.group = group;\n\n this.classNames = {\n figure: pig.settings.classPrefix + '-figure',\n thumbnail: pig.settings.classPrefix + '-thumbnail',\n loaded: pig.settings.classPrefix + '-loaded'\n };\n\n return this;\n }\n\n /**\n * Returns the index of the group this image belongs to.\n */\n ProgressiveImage.prototype.getGroupIndex = function() {\n return this.group.getIndex();\n };\n\n /**\n * Returns the group this image belongs to.\n */\n ProgressiveImage.prototype.getGroup = function() {\n return this.group;\n };\n\n /**\n * Updates the visibility of this image.\n *\n * @param {number} miny - The top of the viewport.\n * @param {number} maxy - The bottom of the viewport.\n */\n ProgressiveImage.prototype.updateVisibility = function(miny, maxy) {\n if (this.style.translateY <= maxy && this.style.translateY + this.style.height >= miny) {\n this.load();\n } else {\n this.hide();\n }\n };\n\n /**\n * Load the image element associated with this ProgressiveImage into the DOM.\n *\n * This function will append the figure into the DOM, create and insert the\n * thumbnail, and create and insert the full image.\n */\n ProgressiveImage.prototype.load = function() {\n // Create a new image element, and insert it into the DOM. It doesn't\n // matter the order of the figure elements, because all positioning\n // is done using transforms.\n this.existsOnPage = true;\n this._updateStyles();\n this.group.getElement().appendChild(this.getElement());\n\n // We run the rest of the function in a 100ms setTimeout so that if the\n // user is scrolling down the page very fast and hide() is called within\n // 100ms of load(), the hide() function will set this.existsOnPage to false\n // and we can exit.\n setTimeout(function() {\n\n // The image was hidden very quickly after being loaded, so don't bother\n // loading it at all.\n if (!this.existsOnPage) {\n return;\n }\n\n // Show thumbnail\n if (!this.thumbnail) {\n this.thumbnail = new Image();\n this.thumbnail.src = this.pig.settings.urlForSize(this.filename, this.pig.settings.thumbnailSize);\n this.thumbnail.className = this.classNames.thumbnail;\n this.thumbnail.onload = function() {\n\n // We have to make sure thumbnail still exists, we may have already been\n // deallocated if the user scrolls too fast.\n if (this.thumbnail) {\n this.thumbnail.className += ' ' + this.classNames.loaded;\n }\n }.bind(this);\n\n this.getElement().appendChild(this.thumbnail);\n }\n\n // Show full image\n if (!this.fullImage) {\n this.fullImage = new Image();\n this.fullImage.src = this.pig.settings.urlForSize(this.filename, this.pig.settings.getImageSize(this.pig.lastWindowWidth));\n this.fullImage.onload = function() {\n\n // We have to make sure fullImage still exists, we may have already been\n // deallocated if the user scrolls too fast.\n if (this.fullImage) {\n this.fullImage.className += ' ' + this.classNames.loaded;\n }\n }.bind(this);\n\n this.getElement().appendChild(this.fullImage);\n }\n }.bind(this), 100);\n };\n\n /**\n * Removes the figure from the DOM, removes the thumbnail and full image, and\n * deletes the this.thumbnail and this.fullImage properties off of the\n * ProgressiveImage object.\n */\n ProgressiveImage.prototype.hide = function() {\n // Remove the images from the element, so that if a user is scrolling super\n // fast, we won't try to load every image we scroll past.\n if (this.getElement()) {\n if (this.thumbnail) {\n this.thumbnail.src = '';\n this.getElement().removeChild(this.thumbnail);\n delete this.thumbnail;\n }\n\n if (this.fullImage) {\n this.fullImage.src = '';\n this.getElement().removeChild(this.fullImage);\n delete this.fullImage;\n }\n }\n\n // Remove the image from the DOM.\n if (this.existsOnPage) {\n this.group.getElement().removeChild(this.getElement());\n }\n\n this.existsOnPage = false;\n };\n\n /**\n * Get the DOM element associated with this ProgressiveImage. We default to\n * using this.element, and we create it if it doesn't exist.\n *\n * @returns {HTMLElement} The DOM element associated with this instance.\n */\n ProgressiveImage.prototype.getElement = function() {\n if (!this.element) {\n this.element = document.createElement(this.pig.settings.figureTagName);\n this.element.className = this.classNames.figure;\n this._updateStyles();\n }\n\n return this.element;\n };\n\n /**\n * Updates the style attribute to reflect this style property on this object.\n */\n ProgressiveImage.prototype._updateStyles = function() {\n this.getElement().style.transition = this.style.transition;\n this.getElement().style.width = this.style.width + 'px';\n this.getElement().style.height = this.style.height + 'px';\n this.getElement().style.transform = (\n 'translate3d(' + this.style.translateX + 'px,' +\n this.style.translateY + 'px, 0)');\n };\n\n // Export Pig into the global scope.\n if (typeof define === 'function' && define.amd) {\n define(Pig);\n } else if (typeof module !== 'undefined' && module.exports) {\n module.exports = Pig;\n } else {\n global.Pig = Pig;\n }\n\n}(this));\n" }, { "path": "src/reducers/albumsReducer.js", "content": "export default function reducer(\n state = {\n albumsUserList: [],\n fetchingAlbumsUserList: false,\n fetchedAlbumsUserList: false,\n\n albumsUser: {},\n fetchingAlbumsUser: false,\n fetchedAlbumsUser: false,\n\n albumsPeople: [],\n fetchingAlbumsPeople: false,\n fetchedAlbumsPeople: false,\n\n albumsAuto: [],\n fetchingAlbumsAuto: false,\n fetchedAlbumsAuto: false,\n\n generatingAlbumsAuto: false,\n generatedAlbumsAuto: false,\n\n albumsAutoList: [],\n fetchingAlbumsAutoList: false,\n fetchedAlbumsAutoList: false,\n\n albumsAutoGalleries: {},\n fetchingAlbumsAutoGalleries: false,\n fetchedAlbumsAutoGalleries: false,\n\n albumsDateList: [],\n fetchingAlbumsDateList: false,\n fetchedAlbumsDateList: false,\n\n albumsDatePhotoHashList: [],\n fetchingAlbumsDatePhotoHashList: false,\n fetchedAlbumsDatePhotoHashList: false,\n idx2hash: [],\n\n albumsDateGalleries: {},\n fetchingAlbumsDateGalleries: false,\n fetchedAlbumsDateGalleries: false,\n\n albumsThingList: [],\n fetchingAlbumsThingList: false,\n fetchedAlbumsThingList: false,\n\n albumsPlaceList: [],\n albumsPlaceListGroupedByGeolocationLevel: {},\n fetchingAlbumsPlaceList: false,\n fetchedAlbumsPlaceList: false,\n\n albumsPlace: {},\n fetchingAlbumsPlace: false,\n fetchedAlbumsPlace: false,\n\n albumsSharedToMe: [],\n fetchingAlbumsSharedToMe: false,\n fetchedAlbumsSharedToMe: false,\n\n albumsSharedFromMe: [],\n fetchingAlbumsSharedFromMe: false,\n fetchedAlbumsSharedFromMe: false,\n\n error: null\n },\n action\n) {\n switch (action.type) {\n\n\n case \"FETCH_ALBUMS_SHARED_TO_ME\": {\n return { ...state, fetchingAlbumsSharedToMe: true };\n }\n case \"FETCH_ALBUMS_SHARED_TO_ME_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsSharedToMe: false,\n fetchedAlbumsSharedToMe: true,\n albumsSharedToMe: action.payload\n };\n }\n case \"FETCH_ALBUMS_SHARED_TO_ME_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsSharedToMe: false,\n fetchedAlbumsSharedToMe: false\n };\n }\n\n\n case \"FETCH_ALBUMS_SHARED_FROM_ME\": {\n return { ...state, fetchingAlbumsSharedFromMe: true };\n }\n case \"FETCH_ALBUMS_SHARED_FROM_ME_FULFILLED\": {\n console.log(action.payload)\n return {\n ...state,\n fetchingAlbumsSharedFromMe: false,\n fetchedAlbumsSharedFromMe: true,\n albumsSharedFromMe: action.payload\n };\n }\n case \"FETCH_ALBUMS_SHARED_FROM_ME_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsSharedFromMe: false,\n fetchedAlbumsSharedFromMe: false\n };\n }\n\n\n\n case \"FETCH_PEOPLE_ALBUMS\": {\n return { ...state, fetchingAlbumsPeople: true };\n }\n case \"FETCH_PEOPLE_ALBUMS_REJECTED\": {\n return { ...state, fetchingAlbumsPeople: false, error: action.payload };\n }\n case \"FETCH_PEOPLE_ALBUMS_FULFILLED\": {\n var new_album = { ...state.albumsPeople };\n new_album[action.payload.id] = action.payload;\n return {\n ...state,\n fetchingAlbumsPeople: false,\n fetchedAlbumsPeople: true,\n albumsPeople: new_album\n };\n }\n\n case \"FETCH_AUTO_ALBUMS\": {\n return { ...state, fetchingAlbumsAuto: true };\n }\n case \"FETCH_AUTO_ALBUMS_REJECTED\": {\n return { ...state, fetchingAlbumsAuto: false, error: action.payload };\n }\n case \"FETCH_AUTO_ALBUMS_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsAuto: false,\n fetchedAlbumsAuto: true,\n albumsAuto: action.payload\n };\n }\n\n case \"GENERATE_AUTO_ALBUMS\": {\n return { ...state, generatingAlbumsAuto: true };\n }\n case \"GENERATE_AUTO_ALBUMS_REJECTED\": {\n return { ...state, generatingAlbumsAuto: false, error: action.payload };\n }\n case \"GENERATE_AUTO_ALBUMS_FULFILLED\": {\n return {\n ...state,\n generatingAlbumsAuto: false,\n generatedAlbumsAuto: true\n };\n }\n\n case \"FETCH_AUTO_ALBUMS_LIST\": {\n return { ...state, fetchingAlbumsAutoList: true };\n }\n case \"FETCH_AUTO_ALBUMS_LIST_REJECTED\": {\n return { ...state, fetchingAlbumsAutoList: false, error: action.payload };\n }\n case \"FETCH_AUTO_ALBUMS_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsAutoList: false,\n fetchedAlbumsAutoList: true,\n albumsAutoList: action.payload\n };\n }\n\n case \"FETCH_AUTO_ALBUMS_RETRIEVE\": {\n return { ...state, fetchingAlbumsAutoGalleries: true };\n }\n case \"FETCH_AUTO_ALBUMS_RETRIEVE_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsAutoGalleries: false,\n error: action.payload\n };\n }\n case \"FETCH_AUTO_ALBUMS_RETRIEVE_FULFILLED\": {\n var new_album = { ...state.albumsAutoGalleries };\n new_album[action.payload.id] = action.payload;\n return {\n ...state,\n fetchingAlbumsAutoGalleries: false,\n fetchedAlbumsAutoGalleries: true,\n albumsAutoGalleries: new_album\n };\n }\n\n case \"FETCH_DATE_ALBUMS_LIST\": {\n return { ...state, fetchingAlbumsDateList: true };\n }\n case \"FETCH_DATE_ALBUMS_LIST_REJECTED\": {\n return { ...state, fetchingAlbumsDateList: false, error: action.payload };\n }\n case \"FETCH_DATE_ALBUMS_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsDateList: false,\n fetchedAlbumsDateList: true,\n albumsDateList: action.payload\n };\n }\n\n case \"FETCH_DATE_ALBUMS_PHOTO_HASH_LIST\": {\n return { ...state, fetchingAlbumsDatePhotoHashList: true };\n }\n case \"FETCH_DATE_ALBUMS_PHOTO_HASH_LIST_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsDatePhotoHashList: false,\n error: action.payload\n };\n }\n case \"FETCH_DATE_ALBUMS_PHOTO_HASH_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsDatePhotoHashList: false,\n fetchedAlbumsDatePhotoHashList: true,\n albumsDatePhotoHashList: action.payload\n };\n }\n\n case \"SET_IDX_TO_IMAGE_HASH\": {\n return {\n ...state,\n idx2hash: action.payload\n };\n }\n\n case \"FETCH_DATE_ALBUMS_RETRIEVE\": {\n return { ...state, fetchingAlbumsDateGalleries: true };\n }\n case \"FETCH_DATE_ALBUMS_RETRIEVE_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsDateGalleries: false,\n error: action.payload\n };\n }\n case \"FETCH_DATE_ALBUMS_RETRIEVE_FULFILLED\": {\n var new_album = { ...state.albumsDateGalleries };\n new_album[action.payload.id] = action.payload;\n return {\n ...state,\n fetchingAlbumsDateGalleries: false,\n fetchedAlbumsDateGalleries: true,\n albumsDateGalleries: new_album\n };\n }\n\n case \"FETCH_THING_ALBUMS_LIST\": {\n return { ...state, fetchingAlbumsThingList: true };\n }\n case \"FETCH_THING_ALBUMS_LIST_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsThingList: false,\n error: action.payload\n };\n }\n case \"FETCH_THING_ALBUMS_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsThingList: false,\n fetchedAlbumsThingList: true,\n albumsThingList: action.payload\n };\n }\n\n case \"GROUP_PLACE_ALBUMS_BY_GEOLOCATION_LEVEL\": {\n return {\n ...state,\n albumsPlaceListGroupedByGeolocationLevel: action.payload\n };\n }\n\n case \"FETCH_PLACE_ALBUMS_LIST\": {\n return { ...state, fetchingAlbumsPlaceList: true };\n }\n case \"FETCH_PLACE_ALBUMS_LIST_REJECTED\": {\n return {\n ...state,\n fetchingAlbumsPlaceList: false,\n error: action.payload\n };\n }\n case \"FETCH_PLACE_ALBUMS_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsPlaceList: false,\n fetchedAlbumsPlaceList: true,\n albumsPlaceList: action.payload\n };\n }\n\n case \"FETCH_PLACE_ALBUMS\": {\n return { ...state, fetchingAlbumsPlace: true };\n }\n case \"FETCH_PLACE_ALBUMS_REJECTED\": {\n return { ...state, fetchingAlbumsPlace: false, error: action.payload };\n }\n case \"FETCH_PLACE_ALBUMS_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsPlace: false,\n fetchedAlbumsPlace: true,\n albumsPlace: {\n ...state.albumsPlace,\n [action.payload.id]: action.payload\n }\n };\n }\n\n case \"FETCH_USER_ALBUMS_LIST\": {\n return { ...state, fetchingAlbumsUserList: true };\n }\n case \"FETCH_USER_ALBUMS_LIST_REJECTED\": {\n return { ...state, fetchingAlbumsUserList: false, error: action.payload };\n }\n case \"FETCH_USER_ALBUMS_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsUserList: false,\n fetchedAlbumsUserList: true,\n albumsUserList: action.payload\n };\n }\n\n case \"FETCH_USER_ALBUMS\": {\n return { ...state, fetchingAlbumsUser: true };\n }\n case \"FETCH_USER_ALBUMS_REJECTED\": {\n return { ...state, fetchingAlbumsUser: false, error: action.payload };\n }\n case \"FETCH_USER_ALBUMS_FULFILLED\": {\n return {\n ...state,\n fetchingAlbumsUser: false,\n fetchedAlbumsUser: true,\n albumsUser: { ...state.albumsUser, [action.payload.id]: action.payload }\n };\n }\n\n case \"TOGGLE_ALBUM_AUTO_FAVORITE\": {\n return { ...state };\n }\n case \"TOGGLE_ALBUM_AUTO_FAVORITE_REJECTED\": {\n return { ...state };\n }\n case \"TOGGLE_ALBUM_AUTO_FAVORITE_FULFILLED\": {\n var new_album = { ...state.albumsAutoGalleries };\n new_album[action.payload.id] = action.payload;\n\n var new_album_list = [...state.albumsAutoList];\n\n var index = -1;\n\n for (var i = 0; i < new_album_list.length; i++) {\n if (new_album_list[i].id === action.payload.id) {\n index = i;\n }\n }\n\n if (index !== -1) {\n new_album_list[index] = action.payload;\n }\n\n return {\n ...state,\n fetchingAlbumsAutoGalleries: false,\n fetchedAlbumsAutoGalleries: true,\n albumsAutoGalleries: new_album,\n albumsAutoList: new_album_list\n };\n }\n\n default: {\n return { ...state };\n }\n }\n}\n\n// FETCH_AUTO_ALBUMS_LIST\n// FETCH_AUTO_ALBUMS_LIST_FULFILLED\n// FETCH_AUTO_ALBUMS_LIST_REJECTED\n\n// TOGGLE_ALBUM_AUTO_FAVORITE\n// TOGGLE_ALBUM_AUTO_FAVORITE_FULFILLED\n// TOGGLE_ALBUM_AUTO_FAVORITE_REJECTED\n" }, { "path": "src/reducers/authReducer.js", "content": "import jwtDecode from 'jwt-decode'\nimport * as auth from '../actions/authActions'\n\n\n\nconst initialState = {\n access: undefined,\n refresh: undefined,\n errors: {},\n}\n\nexport default (state=initialState, action) => {\n switch(action.type) {\n case \"LOGIN_FULFILLED\": \n return {\n access: {\n token: action.payload.access,\n ...jwtDecode(action.payload.access)\n },\n refresh: {\n token: action.payload.refresh,\n ...jwtDecode(action.payload.refresh)\n },\n errors: {}\n }\n case \"LOGIN_REJECTED\": \n return {\n ...state,\n errors: action.payload.response||{non_field_errors:action.payload.message}\n }\n case \"REFRESH_ACCESS_TOKEN_FULFILLED\": \n return {\n ...state,\n access: {\n token: action.payload.access,\n ...jwtDecode(action.payload.access)\n },\n errors: {}\n }\n\n case auth.LOGIN_SUCCESS:\n return {\n access: {\n token: action.payload.access,\n ...jwtDecode(action.payload.access)\n },\n refresh: {\n token: action.payload.refresh,\n ...jwtDecode(action.payload.refresh)\n },\n errors: {}\n }\n case auth.TOKEN_RECEIVED:\n return {\n ...state,\n access: {\n token: action.payload.access,\n ...jwtDecode(action.payload.access)\n }\n }\n case auth.LOGIN_FAILURE:\n case auth.TOKEN_FAILURE:\n return {\n access: undefined,\n refresh: undefined,\n errors: \n action.payload.response || \n {'non_field_errors': action.payload.statusText},\n }\n\n default:\n return state\n }\n}\n\n\nexport function accessToken(state) {\n if (state.access) {\n return state.access.token\n }\n}\n \nexport function refreshToken(state) {\n if (state.refresh) {\n return state.refresh.token\n }\n}\n \nexport function isAccessTokenExpired(state) {\n if (state.access && state.access.exp) {\n return 1000 * state.access.exp - (new Date()).getTime() < 5000\n }\n return true\n}\n\nexport function isRefreshTokenExpired(state) {\n if (state.refresh && state.refresh.exp) {\n return 1000 * state.refresh.exp - (new Date()).getTime() < 5000\n }\n return true\n}\n\nexport function isAuthenticated(state) {\n // return true\n return !isAccessTokenExpired(state)\n}\n\nexport function errors(state) {\n return state.errors\n}\n\n\n\n\n\n/*\nexport default function reducer(state={\n jwtToken: null,\n error: null,\n }, action) {\n\n switch (action.type) {\n \tcase \"LOGIN_FULFILLED\": {\n \t\treturn {...state, jwtToken: 'JWT '+action.payload}\n \t}\n\n case \"LOGOUT\": {\n return { jwtToken: null} \n }\n\n default: {\n return {...state}\n }\n }\n}\n*/\n\n" }, { "path": "src/reducers/facesReducer.js", "content": "export default function reducer(\n state = {\n faces: [],\n fetching: false,\n fetched: false,\n\n labeledFaces: [],\n fetchingLabeledFaces: false,\n fetchedLabeledFaces: false,\n\n inferredFaces: [],\n fetchingInferredFaces: false,\n fetchedInferredFaces: false,\n\n facesList: [],\n fetchingFacesList: false,\n fetchedFacesList: false,\n\n labeledFacesList: [],\n fetchingLabeledFacesList: false,\n fetchedLabeledFacesList: false,\n\n inferredFacesList: [],\n fetchingInferredFacesList: false,\n fetchedInferredFacesList: false,\n\n faceToLabel: {},\n fetchingFaceToLabel: false,\n fetchedFaceToLabel: false,\n\n facesVis: [],\n training: false,\n trained: false,\n\n clustering: false,\n clustered: false,\n\n error: null\n },\n action\n) {\n switch (action.type) {\n // all faces\n case \"FETCH_FACES\": {\n return { ...state, fetching: true };\n }\n case \"FETCH_FACES_REJECTED\": {\n return { ...state, fetching: false, error: action.payload };\n }\n case \"FETCH_FACES_FULFILLED\": {\n return {\n ...state,\n fetching: false,\n fetched: true,\n faces: action.payload\n };\n }\n\n // labeled faces\n case \"FETCH_LABELED_FACES\": {\n return { ...state, fetchingLabeledFaces: true };\n }\n case \"FETCH_LABELED_FACES_REJECTED\": {\n return { ...state, fetchingLabeledFaces: false, error: action.payload };\n }\n case \"FETCH_LABELED_FACES_FULFILLED\": {\n return {\n ...state,\n fetchingLabeledFaces: false,\n fetchedLabeledFaces: true,\n labeledFaces: action.payload\n };\n }\n\n // inferred faces\n case \"FETCH_INFERRED_FACES\": {\n return { ...state, fetchingInferredFaces: true };\n }\n case \"FETCH_INFERRED_FACES_REJECTED\": {\n return { ...state, fetchingInferredFaces: false, error: action.payload };\n }\n case \"FETCH_INFERRED_FACES_FULFILLED\": {\n return {\n ...state,\n fetchingInferredFaces: false,\n fetchedInferredFaces: true,\n inferredFaces: action.payload\n };\n }\n\n // fast list\n case \"FETCH_FACES_LIST\": {\n return { ...state, fetchingFacesList: true };\n }\n case \"FETCH_FACES_LIST_REJECTED\": {\n return { ...state, fetchingFacesList: false, error: action.payload };\n }\n case \"FETCH_FACES_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingFacesList: false,\n fetchedFacesList: true,\n facesList: action.payload\n };\n }\n\n // labeled faces\n case \"FETCH_LABELED_FACES_LIST\": {\n return { ...state, fetchingLabeledFacesList: true };\n }\n case \"FETCH_LABELED_FACES_LIST_REJECTED\": {\n return {\n ...state,\n fetchingLabeledFacesList: false,\n error: action.payload\n };\n }\n case \"FETCH_LABELED_FACES_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingLabeledFacesList: false,\n fetchedLabeledFacesList: true,\n labeledFacesList: action.payload\n };\n }\n\n // inferred faces\n case \"FETCH_INFERRED_FACES_LIST\": {\n return { ...state, fetchingInferredFacesList: true };\n }\n case \"FETCH_INFERRED_FACES_LIST_REJECTED\": {\n return {\n ...state,\n fetchingInferredFacesList: false,\n error: action.payload\n };\n }\n case \"FETCH_INFERRED_FACES_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingInferredFacesList: false,\n fetchedInferredFacesList: true,\n inferredFacesList: action.payload\n };\n }\n\n // mass labeling faces\n case \"SET_FACES_PERSON_LABEL_FULFILLED\": {\n const justLabeledFaceIDs = action.payload.map(face => face.id);\n\n var newInferredFacesList = state.inferredFacesList.filter(\n face => !justLabeledFaceIDs.includes(face.id)\n );\n var newLabeledFacesList = state.labeledFacesList.filter(\n face => !justLabeledFaceIDs.includes(face.id)\n );\n\n action.payload.forEach(justLabeledFace => {\n newLabeledFacesList.push(justLabeledFace);\n });\n\n return {\n ...state,\n inferredFacesList: newInferredFacesList,\n labeledFacesList: newLabeledFacesList\n };\n }\n\n // mass labeling faces\n case \"DELETE_FACES_FULFILLED\": {\n const justDeletedFaces = action.payload;\n var newInferredFacesList = state.inferredFacesList.filter(\n face => !justDeletedFaces.includes(face.id)\n );\n var newLabeledFacesList = state.labeledFacesList.filter(\n face => !justDeletedFaces.includes(face.id)\n );\n\n return {\n ...state,\n inferredFacesList: newInferredFacesList,\n labeledFacesList: newLabeledFacesList\n };\n }\n\n //face to label\n case \"FETCH_FACE_TO_LABEL\": {\n return { ...state, fetchingFaceToLabel: true };\n }\n case \"FETCH_FACE_TO_LABEL_REJECTED\": {\n return { ...state, fetchingFaceToLabel: false, error: action.payload };\n }\n case \"FETCH_FACE_TO_LABEL_FULFILLED\": {\n return {\n ...state,\n fetchingFaceToLabel: false,\n fetchedFaceToLabel: true,\n faceToLabel: action.payload\n };\n }\n\n case \"LOAD_FACE_TO_LABEL\": {\n return { ...state, faceToLabel: action.payload };\n }\n\n //train faces\n case \"TRAIN_FACES\": {\n return { ...state, training: true };\n }\n case \"TRAIN_FACES_REJECTED\": {\n return { ...state, training: false, error: action.payload };\n }\n case \"TRAIN_FACES_FULFILLED\": {\n return {\n ...state,\n training: false,\n trained: true,\n facesVis: action.payload\n };\n }\n\n //train faces\n case \"CLUSTER_FACES\": {\n return { ...state, clustering: true };\n }\n case \"CLUSTER_FACES_REJECTED\": {\n return { ...state, clustering: false, error: action.payload };\n }\n case \"CLUSTER_FACES_FULFILLED\": {\n return {\n ...state,\n clustering: false,\n clustered: true,\n facesVis: action.payload\n };\n }\n\n //delete face\n case \"DELETE_FACE\": {\n return {\n ...state,\n faces: state.faces.filter(element => element.id !== action.payload)\n };\n }\n\n default: {\n return { ...state };\n }\n }\n}\n" }, { "path": "src/reducers/index.js", "content": "import { combineReducers } from \"redux\"\nimport { routerReducer } from 'react-router-redux'\nimport {reducer as notificationsReducer} from 'reapop'\n\nimport people from \"./peopleReducer\"\nimport faces from \"./facesReducer\"\nimport albums from './albumsReducer'\nimport util from './utilReducer'\nimport photos from './photosReducer'\n//import auth from './authReducer'\nimport auth, * as fromAuth from './authReducer'\nimport search from './searchReducer'\nimport ui from './uiReducer'\nimport pub from './publicReducer'\nimport user from './userReducer'\n\nconst appReducer = combineReducers({\n people,\n faces,\n albums,\n util,\n photos,\n auth,\n search,\n routerReducer,\n ui,\n pub,\n user,\n notifications: notificationsReducer()\n \n})\n\nexport default (state,action) => {\n\tif (action.type === 'LOGOUT') {\n\t\tstate = {}\n\t}\n\n\treturn appReducer(state,action)\n}\n\nexport const isAuthenticated =\n state => fromAuth.isAuthenticated(state.auth)\nexport const accessToken = \n state => fromAuth.accessToken(state.auth)\nexport const isAccessTokenExpired =\n state => fromAuth.isAccessTokenExpired(state.auth)\nexport const refreshToken =\n state => fromAuth.refreshToken(state.auth)\nexport const isRefreshTokenExpired =\n state => fromAuth.isRefreshTokenExpired(state.auth)\nexport const authErrors =\n state => fromAuth.errors(state.auth)\n\nexport function withAuth(headers) {\n return (state) => { \n return ({\n ...headers,\n 'Authorization': `Bearer ${accessToken(state)}`\n })\n }\n}\n" }, { "path": "src/reducers/peopleReducer.js", "content": "export default function reducer(state={\n people: [],\n socialGraph: {},\n egoGraph: {},\n fetching: false,\n fetched: false,\n adding: false,\n added: false,\n error: null,\n fetchingSocialGraph: false,\n fetchedSocialGraph: false,\n fetchingEgoGraph: false,\n fetchedEgoGraph: false,\n }, action) {\n\n switch (action.type) {\n case \"FETCH_PEOPLE\": {\n return {...state, fetching: true}\n }\n case \"FETCH_PEOPLE_REJECTED\": {\n return {...state, fetching: false, error: action.payload}\n }\n case \"FETCH_PEOPLE_FULFILLED\": {\n return {\n ...state,\n fetching: false,\n fetched: true,\n people: action.payload,\n }\n }\n\n\n case \"ADD_PERSON\": {\n return {...state, adding: true}\n }\n case \"ADD_PERSON_REJECTED\": {\n return {...state, adding: false, error: action.payload}\n }\n case \"ADD_PERSON_FULFILLED\": {\n const newState = Object.assign({}, state, {adding:false}, {added:true})\n newState.people = state.people.concat(action.payload)\n return newState\n }\n\n\n case \"ADD_PERSON_AND_SET_FACE_LABEL\": {\n return {...state, adding: true}\n }\n case \"ADD_PERSON_AND_SET_FACE_LABEL_REJECTED\": {\n return {...state, adding: false, error: action.payload}\n }\n case \"ADD_PERSON_AND_SET_FACE_LABEL_FULFILLED\": {\n const newState = Object.assign({}, state, {adding:false}, {added:true})\n newState.people = state.people.concat(action.payload)\n return newState\n }\n\n\n\n\n case \"FETCH_SOCIAL_GRAPH\": {\n return {...state, fetchingSocialGraph: true}\n }\n case \"FETCH_SOCIAL_GRAPH_REJECTED\": {\n return {...state, fetchingSocialGraph: false, error: action.payload}\n }\n case \"FETCH_SOCIAL_GRAPH_FULFILLED\": {\n return {\n ...state,\n fetchingSocialGraph: false,\n fetchedSocialGraph: true,\n socialGraph: action.payload,\n }\n }\n\n\n\n\n\n case \"FETCH_EGO_GRAPH\": {\n return {...state, fetchingEgoGraph: true}\n }\n case \"FETCH_EGO_GRAPH_REJECTED\": {\n return {...state, fetchingEgoGraph: false, error: action.payload}\n }\n case \"FETCH_EGO_GRAPH_FULFILLED\": {\n return {\n ...state,\n fetchingEgoGraph: false,\n fetchedEgoGraph: true,\n egoGraph: {...state.egoGraph, [action.payload.person_id]:action.payload.data},\n }\n }\n\n\n\n\n\n\n\n\n default: {\n return {...state}\n }\n }\n}\n\n" }, { "path": "src/reducers/photosReducer.js", "content": "export default function reducer(\n state = {\n scanningPhotos: false,\n scannedPhotos: false,\n error: null,\n\n photoDetails: {},\n fetchingPhotoDetail: false,\n fetchedPhotoDetail: false,\n\n photos: {},\n fetchedPhotos: false,\n fetchingPhotos: false,\n\n favoritePhotos: [],\n fetchingFavoritePhotos: false,\n fetchedFavoritePhotos: false,\n\n hiddenPhotos: [],\n fetchingHiddenPhotos: false,\n fetchedHiddenPhotos: false,\n\n noTimestampPhotos: [],\n fetchingNoTimestampPhotos: false,\n fetchedNoTimestampPhotos: false,\n\n publicPhotos: [],\n fetchingPublicPhotos: false,\n fetchedPublicPhotos: false,\n\n photosSharedToMe: [],\n fetchingPhotosSharedToMe: false,\n fetchedPhotosSharedToMe: false,\n\n photosSharedFromMe: [],\n fetchingPhotosSharedFromMe: false,\n fetchedPhotosSharedFromMe: false,\n\n recentlyAddedPhotos: [],\n recentlyAddedIdx2hash: [],\n fetchingRecentlyAddedPhotos: false,\n fetchedRecentlyAddedPhotos: false,\n\n generatingCaptionIm2txt: false,\n generatedCaptionIm2txt: false,\n },\n action\n) {\n switch (action.type) {\n case \"GENERATE_PHOTO_CAPTION\": {\n return {...state, generatingCaptionIm2txt: true}\n }\n\n case \"GENERATE_PHOTO_CAPTION_FULFILLED\": {\n return {...state, generatingCaptionIm2txt: false, generatedCaptionIm2txt: true}\n }\n\n case \"GENERATE_PHOTO_CAPTION_REJECTED\": {\n return {...state, generatingCaptionIm2txt: false, generatedCaptionIm2txt: false}\n }\n\n\n\n\n\n\n case \"FETCH_RECENTLY_ADDED_PHOTOS\" : {\n return {...state, fetchingRecentlyAddedPhotos: true}\n } \n\n case \"FETCH_RECENTLY_ADDED_PHOTOS_FULFILLED\" : {\n return {\n ...state,\n fetchingRecentlyAddedPhotos: false,\n fetchedRecentlyAddedPhotos: true,\n recentlyAddedPhotos: action.payload.res,\n recentlyAddedIdx2hash: action.payload.idx2hash\n \n }\n } \n\n case \"FETCH_RECENTLY_ADDED_PHOTOS_REJECTED\" : {\n return {\n ...state,\n fetchingRecentlyAddedPhotos: false,\n fetchedRecentlyAddedPhotos: false\n }\n } \n\n\n\n\n\n\n case \"FETCH_PHOTOS_SHARED_TO_ME\": {\n return { ...state, fetchingPhotosSharedToMe: true };\n }\n case \"FETCH_PHOTOS_SHARED_TO_ME_FULFILLED\": {\n return {\n ...state,\n fetchingPhotosSharedToMe: false,\n fetchedPhotosSharedToMe: true,\n photosSharedToMe: action.payload\n };\n }\n case \"FETCH_PHOTOS_SHARED_TO_ME_REJECTED\": {\n return {\n ...state,\n fetchingPhotosSharedToMe: false,\n fetchedPhotosSharedToMe: false\n };\n }\n\n\n\n case \"FETCH_PHOTOS_SHARED_FROM_ME\": {\n return { ...state, fetchingPhotosSharedFromMe: true };\n }\n case \"FETCH_PHOTOS_SHARED_FROM_ME_FULFILLED\": {\n return {\n ...state,\n fetchingPhotosSharedFromMe: false,\n fetchedPhotosSharedFromMe: true,\n photosSharedFromMe: action.payload\n };\n }\n case \"FETCH_PHOTOS_SHARED_FROM_ME_REJECTED\": {\n return {\n ...state,\n fetchingPhotosSharedFromMe: false,\n fetchedPhotosSharedFromMe: false\n };\n }\n\n\n\n\n\n\n case \"SCAN_PHOTOS\": {\n return { ...state, scanningPhotos: true };\n }\n case \"SCAN_PHOTOS_REJECTED\": {\n return { ...state, scanningPhotos: false, error: action.payload };\n }\n case \"SCAN_PHOTOS_FULFILLED\": {\n return {\n ...state,\n scanningPhotos: false,\n scannedPhotos: true\n };\n }\n\n case \"FETCH_PHOTOS\": {\n return { ...state, fetchingPhotos: true };\n }\n case \"FETCH_PHOTOS_REJECTED\": {\n return { ...state, fetchingPhotos: false, error: action.payload };\n }\n case \"FETCH_PHOTOS_FULFILLED\": {\n return {\n ...state,\n fetchingPhotos: false,\n fetchedPhotos: true,\n photos: action.payload\n };\n }\n\n case \"FETCH_FAVORITE_PHOTOS\": {\n return { ...state, fetchingFavoritePhotos: true };\n }\n case \"FETCH_FAVORITE_PHOTOS_REJECTED\": {\n return { ...state, fetchingFavoritePhotos: false, error: action.payload };\n }\n case \"FETCH_FAVORITE_PHOTOS_FULFILLED\": {\n return {\n ...state,\n fetchingFavoritePhotos: false,\n fetchedFavoritePhotos: true,\n favoritePhotos: action.payload\n };\n }\n\n case \"FETCH_HIDDEN_PHOTOS\": {\n return { ...state, fetchingHiddenPhotos: true };\n }\n case \"FETCH_HIDDEN_PHOTOS_REJECTED\": {\n return { ...state, fetchingHiddenPhotos: false, error: action.payload };\n }\n case \"FETCH_HIDDEN_PHOTOS_FULFILLED\": {\n return {\n ...state,\n fetchingHiddenPhotos: false,\n fetchedHiddenPhotos: true,\n hiddenPhotos: action.payload\n };\n }\n\n case \"FETCH_NO_TIMESTAMP_PHOTOS\": {\n return { ...state, fetchingNoTimestampPhotos: true };\n }\n case \"FETCH_NO_TIMESTAMP_PHOTOS_REJECTED\": {\n return {\n ...state,\n fetchingNoTimestampPhotos: false,\n error: action.payload\n };\n }\n case \"FETCH_NO_TIMESTAMP_PHOTOS_FULFILLED\": {\n return {\n ...state,\n fetchingNoTimestampPhotos: false,\n fetchedNoTimestampPhotos: true,\n noTimestampPhotos: action.payload\n };\n }\n\n case \"FETCH_PHOTO_DETAIL\": {\n return {\n ...state,\n fetchingPhotoDetail: true\n };\n }\n case \"FETCH_PHOTO_DETAIL_FULFILLED\": {\n var newPhotoDetails = { ...state.photoDetails };\n newPhotoDetails[action.payload.image_hash] = action.payload;\n return {\n ...state,\n fetchingPhotoDetail: false,\n fetchedPhotoDetail: true,\n photoDetails: newPhotoDetails\n };\n }\n case \"FETCH_PHOTO_DETAIL_REJECTED\": {\n return { ...state, fetchingPhotoDetail: false, error: action.payload };\n }\n\n case \"SET_PHOTOS_PUBLIC_FULFILLED\": {\n var valPublic = action.payload.public;\n var imageHashes = action.payload.image_hashes;\n var updatedPhotos = action.payload.updatedPhotos;\n var newPhotos = { ...state.photoDetails };\n\n var updatedPhotosImageHashes = updatedPhotos.map(\n photo => photo.image_hash\n );\n\n updatedPhotos.forEach(photo => {\n newPhotos[[photo.image_hash]] = photo;\n });\n\n var newPublicPhotos = [...state.publicPhotos];\n\n if (valPublic) {\n updatedPhotos.forEach(photo => {\n newPublicPhotos.push(photo);\n });\n } else {\n newPublicPhotos = newPublicPhotos.filter(photo => {\n if (updatedPhotosImageHashes.includes(photo.image_hash)) {\n return false;\n } else {\n return true;\n }\n });\n }\n\n return {\n ...state,\n photoDetails: newPhotos,\n publicPhotos: newPublicPhotos\n };\n }\n\n case \"SET_PHOTOS_FAVORITE_FULFILLED\": {\n var valFavorite = action.payload.favorite;\n var imageHashes = action.payload.image_hashes;\n var updatedPhotos = action.payload.updatedPhotos;\n var newPhotos = { ...state.photoDetails };\n\n var updatedPhotosImageHashes = updatedPhotos.map(\n photo => photo.image_hash\n );\n\n updatedPhotos.forEach(photo => {\n newPhotos[[photo.image_hash]] = photo;\n });\n\n var newFavoritePhotos = [...state.favoritePhotos];\n\n if (valFavorite) {\n updatedPhotos.forEach(photo => {\n newFavoritePhotos.push(photo);\n });\n } else {\n newFavoritePhotos = newFavoritePhotos.filter(photo => {\n if (updatedPhotosImageHashes.includes(photo.image_hash)) {\n return false;\n } else {\n return true;\n }\n });\n }\n\n return {\n ...state,\n photoDetails: newPhotos,\n favoritePhotos: newFavoritePhotos\n };\n }\n\n case \"SET_PHOTOS_HIDDEN_FULFILLED\": {\n var valHidden = action.payload.hidden;\n var imageHashes = action.payload.image_hashes;\n var updatedPhotos = action.payload.updatedPhotos;\n var newPhotos = { ...state.photoDetails };\n\n var updatedPhotosImageHashes = updatedPhotos.map(\n photo => photo.image_hash\n );\n\n updatedPhotos.forEach(photo => {\n newPhotos[[photo.image_hash]] = photo;\n });\n\n var newHiddenPhotos = [...state.hiddenPhotos];\n\n if (valFavorite) {\n updatedPhotos.forEach(photo => {\n newHiddenPhotos.push(photo);\n });\n } else {\n newHiddenPhotos = newHiddenPhotos.filter(photo => {\n if (updatedPhotosImageHashes.includes(photo.image_hash)) {\n return false;\n } else {\n return true;\n }\n });\n }\n\n return {\n ...state,\n photoDetails: newPhotos,\n hiddenPhotos: newHiddenPhotos\n };\n }\n\n default: {\n return { ...state };\n }\n }\n}\n" }, { "path": "src/reducers/publicReducer.js", "content": "export default function reducer(\n state = {\n userPublicPhotos: {},\n fetchingUserPublicPhotos: false,\n fetchedUserPublicPhotos: false,\n\n publicUserList: [],\n fetchingPublicUserList: false,\n fetchedPublicUserList: false,\n\n error: null\n },\n action\n) {\n switch (action.type) {\n case \"FETCH_USER_PUBLIC_PHOTOS\": {\n return {\n ...state,\n fetchingUserPublicPhotos: true\n };\n }\n case \"FETCH_USER_PUBLIC_PHOTOS_FULFILLED\": {\n return {\n ...state,\n fetchingUserPublicPhotos: false,\n fetchedUserPublicPhotos: false,\n userPublicPhotos: {\n ...state.userPublicPhotos,\n [action.payload.user]: action.payload.photos\n }\n };\n }\n\n\n case \"FETCH_PUBLIC_USER_LIST\": {\n return {\n ...state,\n fetchingPublicUserList: true\n };\n }\n case \"FETCH_PUBLIC_USER_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingPublicUserList: false,\n fetchedPublicUserList: false,\n publicUserList: action.payload\n };\n }\n\n\n\n default: {\n return { ...state };\n }\n }\n}\n" }, { "path": "src/reducers/searchReducer.js", "content": "export default function reducer(state={\n searchPhotosRes: [],\n searchPhotosResGroupedByDate: [],\n idx2hash:[],\n searchPeopleRes: [],\n searchPlaceAlbumsRes: [],\n searchThingAlbumsRes: [],\n\n searchingPhotos: false,\n searchedPhotos: false,\n searchingPeople: false,\n searchedPeople: false,\n searchingThingAlbums: false,\n searchedThingAlbums: false,\n searchingPlaceAlbums: false,\n searchedPlaceAlbums: false,\n\n error: null,\n query: null,\n }, action) {\n\n switch (action.type) {\n case \"SEARCH_PHOTOS_EMPTY_QUERY_ERROR\": {\n return {...state, error:\"Search query cannot be empty!\"}\n }\n \tcase \"SEARCH_PHOTOS\": {\n \t\treturn {...state, searchPhotoRes: [], searchingPhotos: true, query:action.payload}\n \t}\n\n case \"SEARCH_PHOTOS_REJECTED\": {\n return { ...state, searchingPhotos: false, error: action.payload}\n }\n\n case \"SEARCH_RES_GROUP_BY_DATE\": {\n return { ...state, searchPhotosResGroupedByDate: action.payload}\n }\n\n case \"SEARCH_RES_IDX2HASH\": {\n return { ...state, idx2hash: action.payload}\n }\n\n case \"SEARCH_PHOTOS_FULFILLED\": {\n return {\n ...state,\n searchingPhotos: false,\n searchedPhotos: true,\n searchPhotosRes: action.payload\n }\n }\n\n\n case \"SEARCH_PEOPLE\": {\n \t\treturn {...state, searchPeopleRes: [], searchingPeople: true}\n }\n case \"SEARCH_PEOPLE_FULFILLED\": {\n return {\n ...state,\n searchingPeople: false,\n searchedPeople: true,\n searchPeopleRes: action.payload\n }\n }\n case \"SEARCH_PEOPLE_REJECTED\": {\n return { ...state, searchingPeople: false, error: action.payload}\n }\n\n\n\n\n case \"SEARCH_THING_ALBUMS\": {\n \t\treturn {...state, searchThingAlbumsRes: [], searchingThingAlbums: true}\n }\n case \"SEARCH_THING_ALBUMS_FULFILLED\": {\n return {\n ...state,\n searchingThingAlbums: false,\n searchedThingAlbums: true,\n searchThingAlbumsRes: action.payload\n }\n }\n case \"SEARCH_THING_ALBUMS_REJECTED\": {\n return { ...state, searchingPeople: false, error: action.payload}\n }\n\n\n case \"SEARCH_PLACE_ALBUMS\": {\n \t\treturn {...state, searchPlaceAlbumsRes: [], searchingPlaceAlbums: true}\n }\n case \"SEARCH_PLACE_ALBUMS_FULFILLED\": {\n return {\n ...state,\n searchingPlaceAlbums: false,\n searchedPlaceAlbums: true,\n searchPlaceAlbumsRes: action.payload\n }\n }\n case \"SEARCH_PLACE_ALBUMS_REJECTED\": {\n return { ...state, searchingPlaceAlbums: false, error: action.payload}\n }\n\n\n\n default: {\n return {...state}\n }\n }\n}\n" }, { "path": "src/reducers/uiReducer.js", "content": "export default function reducer(state={\n showSidebar: true,\n contentWidth: window.innerWidth-20,\n gridType:'loose',\n error: null,\n }, action) {\n\n switch (action.type) {\n case \"TOGGLE_SIDEBAR\": {\n const showSidebar = !state.showSidebar\n const contentWidth = showSidebar ? window.innerWidth - 85 : window.innerWidth \n\n return {...state, showSidebar: !state.showSidebar, contentWidth:contentWidth}\n }\n\n case \"HIDE_SIDEBAR\": {\n return {...state, showSidebar: false}\n }\n\n case \"SET_GRID_TYPE\": {\n return {...state,gridType:action.payload}\n }\n\n default: {\n return {...state}\n }\n }\n}\n" }, { "path": "src/reducers/userReducer.js", "content": "export default function reducer(\n state = {\n userDetails: {},\n fetchingUserDetails: false,\n fetchedUserDetails: false,\n\n userSelfDetails: {},\n fetchingUserSelfDetails: false,\n fetchedUserSelfDetails: false,\n\n error: null\n },\n action\n) {\n switch (action.type) {\n case \"FETCH_USER_SELF_DETAILS\": {\n return { ...state, fetchingUserSelfDetails: true };\n }\n case \"FETCH_USER_SELF_DETAILS_FULFILLED\": {\n return {\n ...state,\n fetchingUserSelfDetails: false,\n fetchedUserSelfDetails: true,\n userSelfDetails: action.payload\n };\n }\n case \"FETCH_USER_SELF_DETAILS_REJECTED\": {\n return { ...state, fetchingUserDetails: false, error: action.payload };\n }\n\n default: {\n return { ...state };\n }\n }\n}\n" }, { "path": "src/reducers/utilReducer.js", "content": "export default function reducer(\n state = {\n\n siteSettings: {},\n fetchingSiteSettings: false,\n fetchedSiteSettings: false,\n\n countStats: {},\n fetchingCountStats: false,\n fetchedCountStats: false,\n\n photoCountryCounts: {},\n fetchingPhotoCountryCounts: false,\n fetchedPhotoCountryCounts: false,\n\n photoMonthCounts: [],\n fetchingPhotoMonthCounts: false,\n fetchedPhotoMonthCounts: false,\n\n statusPhotoScan: { status: true },\n statusAutoAlbumProcessing: { status: true },\n\n generatingAutoAlbums: false,\n\n locationClusters: [],\n fetchingLocationClusters: false,\n fetchedLocationClusters: false,\n\n wordCloud: {},\n fetchingWordCloud: false,\n fetchedWordCloud: false,\n\n exampleSearchTerms: [],\n fetchingExampleSearchTerms: false,\n fetchedExampleSearchTerms: false,\n\n locationSunburst: { name: \"Loading...\" },\n fetchingLocationSunburst: false,\n fetchedLocationSunburst: false,\n\n locationTimeline: [],\n fetchingLocationTimeline: false,\n fetchedLocationTimeline: false,\n\n workerAvailability: false,\n workerRunningJob: null,\n\n userList: [],\n fetchingUserList: false,\n fetchedUserList: false,\n\n directoryTree:[],\n fetchingDirectoryTree:false,\n fetchedDirectoryTree:false,\n\n nextcloudDirectoryTree:[],\n fetchingNextcloudDirectoryTree:false,\n fetchedNextcloudDirectoryTree:false,\n\n jobList: [],\n jobCount: 0,\n fetchingJobList: false,\n fetchedJobList: false,\n\n error: null\n },\n action\n) {\n switch (action.type) {\n\n case \"FETCH_JOB_LIST\": {\n return {\n ...state,\n fetchingJobList: true\n };\n }\n case \"FETCH_JOB_LIST_FULFILLED\": {\n return {\n ...state,\n jobList: action.payload.results,\n jobCount: action.payload.count,\n fetchedJobList: true,\n fetchingJobList: false\n }\n }\n case \"FETCH_JOB_LIST_REJECTED\": {\n return {\n ...state,\n fetchingJobList: false,\n fetchedJobList: false\n };\n }\n\n\n\n\n\n\n case \"SET_SITE_SETTINGS_FULFILLED\": {\n return {\n ...state,\n siteSettings: action.payload\n };\n }\n\n\n\n case \"FETCH_SITE_SETTINGS\": {\n return { ...state, fetchingSiteSettings: true };\n }\n case \"FETCH_SITE_SETTINGS_FULFILLED\": {\n return {\n ...state,\n fetchingSiteSettings: false,\n fetchedSiteSettings: true,\n siteSettings: action.payload\n };\n }\n case \"FETCH_SITE_SETTINGS_REJECTED\": {\n return {\n ...state,\n fetchingSiteSettings:false,\n }\n }\n\n\n\n case \"FETCH_USER_LIST\": {\n return { ...state, fetchingUserList: true };\n }\n case \"FETCH_USER_LIST_FULFILLED\": {\n return {\n ...state,\n fetchingUserList: false,\n fetchedUserList: true,\n userList: action.payload\n };\n }\n case \"FETCH_USER_LIST_REJECTED\": {\n return {\n ...state,\n fetchingUserList:false,\n }\n }\n\n case \"FETCH_DIRECTORY_TREE\": {\n return { ...state, fetchingDirectoryTree: true };\n }\n case \"FETCH_DIRECTORY_TREE_FULFILLED\": {\n return {\n ...state,\n fetchingDirectoryTree: false,\n fetchedDirectoryTree: true,\n directoryTree: action.payload\n };\n }\n case \"FETCH_DIRECTORY_TREE_REJECTED\": {\n return {\n ...state,\n fetchingDirectoryTree:false,\n }\n }\n \n case \"FETCH_NEXTCLOUD_DIRECTORY_TREE\": {\n return { ...state, fetchingNextcloudDirectoryTree: true };\n }\n case \"FETCH_NEXTCLOUD_DIRECTORY_TREE_FULFILLED\": {\n return {\n ...state,\n fetchingNextcloudDirectoryTree: false,\n fetchedNextcloudDirectoryTree: true,\n nextcloudDirectoryTree: action.payload\n };\n }\n case \"FETCH_NEXTCLOUD_DIRECTORY_TREE_REJECTED\": {\n return {\n ...state,\n fetchingNextcloudDirectoryTree:false,\n fetchedNextcloudDirectoryTree: false,\n }\n }\n\n case \"SET_WORKER_AVAILABILITY\": {\n return { ...state, workerAvailability: action.payload };\n }\n case \"SET_WORKER_RUNNING_JOB\": {\n return { ...state, workerRunningJob: action.payload };\n }\n\n case \"GENERATE_EVENT_ALBUMS\": {\n return { ...state, generatingAutoAlbums: true };\n }\n case \"GENERATE_EVENT_ALBUMS_REJECTED\": {\n return { ...state, generatingAutoAlbums: false, error: action.payload };\n }\n case \"GENERATE_EVENT_ALBUMS_FULFILLED\": {\n return {\n ...state,\n generatingAutoAlbums: false\n };\n }\n\n case \"FETCH_LOCATION_TIMELINE\": {\n return { ...state, fetchingLocationTimeline: true };\n }\n case \"FETCH_LOCATION_TIMELINE_REJECTED\": {\n return {\n ...state,\n fetchingLocationTimeline: false,\n error: action.payload\n };\n }\n case \"FETCH_LOCATION_TIMELINE_FULFILLED\": {\n return {\n ...state,\n fetchingLocationTimeline: false,\n fetchedLocationTimeline: true,\n locationTimeline: action.payload\n };\n }\n\n case \"FETCH_LOCATION_SUNBURST\": {\n return { ...state, fetchingLocationSunburst: true };\n }\n case \"FETCH_LOCATION_SUNBURST_REJECTED\": {\n return {\n ...state,\n fetchingLocationSunburst: false,\n error: action.payload\n };\n }\n case \"FETCH_LOCATION_SUNBURST_FULFILLED\": {\n return {\n ...state,\n fetchingLocationSunburst: false,\n fetchedLocationSunburst: true,\n locationSunburst: action.payload\n };\n }\n\n case \"FETCH_EXAMPLE_SEARCH_TERMS\": {\n return { ...state, fetchingExampleSearchTerms: true };\n }\n case \"FETCH_EXAMPLE_SEARCH_TERMS_REJECTED\": {\n return {\n ...state,\n fetchingExampleSearchTerms: false,\n error: action.payload\n };\n }\n case \"FETCH_EXAMPLE_SEARCH_TERMS_FULFILLED\": {\n return {\n ...state,\n fetchingExampleSearchTerms: false,\n fetchedExampleSearchTerms: true,\n exampleSearchTerms: action.payload\n };\n }\n\n case \"FETCH_COUNT_STATS\": {\n return { ...state, fetchingCountStats: true };\n }\n case \"FETCH_COUNT_STATS_REJECTED\": {\n return { ...state, fetchingCountStats: false, error: action.payload };\n }\n case \"FETCH_COUNT_STATS_FULFILLED\": {\n return {\n ...state,\n fetchingCountStats: false,\n fetchedCountStats: true,\n countStats: action.payload\n };\n }\n\n case \"FETCH_LOCATION_CLUSTERS\": {\n return { ...state, fetchingLocationClusters: true };\n }\n case \"FETCH_LOCATION_CLUSTERS_REJECTED\": {\n return {\n ...state,\n fetchingLocationClusters: false,\n error: action.payload\n };\n }\n case \"FETCH_LOCATION_CLUSTERS_FULFILLED\": {\n return {\n ...state,\n fetchingLocationClusters: false,\n fetchedLocationClusters: true,\n locationClusters: action.payload\n };\n }\n\n case \"FETCH_PHOTO_COUNTRY_COUNTS\": {\n return { ...state, fetchingPhotoCountryCounts: true };\n }\n case \"FETCH_PHOTO_COUNTRY_COUNTS_REJECTED\": {\n return {\n ...state,\n fetchingPhotoCountryCounts: false,\n error: action.payload\n };\n }\n case \"FETCH_PHOTO_COUNTRY_COUNTS_FULFILLED\": {\n return {\n ...state,\n fetchingPhotoCountryCounts: false,\n fetchedPhotoCountryCounts: true,\n photoCountryCounts: action.payload\n };\n }\n\n case \"FETCH_PHOTO_MONTH_COUNTS\": {\n return { ...state, fetchingPhotoMonthCounts: true };\n }\n case \"FETCH_PHOTO_MONTH_COUNTS_REJECTED\": {\n return {\n ...state,\n fetchingPhotoMonthCounts: false,\n error: action.payload\n };\n }\n case \"FETCH_PHOTO_MONTH_COUNTS_FULFILLED\": {\n return {\n ...state,\n fetchingPhotoMonthCounts: false,\n fetchedPhotoMonthCounts: true,\n photoMonthCounts: action.payload\n };\n }\n\n case \"FETCH_WORDCLOUD\": {\n return { ...state, fetchingWordCloud: true };\n }\n case \"FETCH_WORDCLOUD_REJECTED\": {\n return { ...state, fetchingWordCloud: false, error: action.payload };\n }\n case \"FETCH_WORDCLOUD_FULFILLED\": {\n return {\n ...state,\n fetchingWordCloud: false,\n fetchedWordCloud: true,\n wordCloud: action.payload\n };\n }\n\n case \"FETCH_PHOTO_SCAN_STATUS\": {\n return { ...state, fetchingPhotoScanStatus: true };\n }\n case \"FETCH_PHOTO_SCAN_STATUS_REJECTED\": {\n return {\n ...state,\n fetchingPhotoScanStatus: false,\n error: action.payload\n };\n }\n case \"FETCH_PHOTO_SCAN_STATUS_FULFILLED\": {\n return {\n ...state,\n fetchingPhotoScanStatus: false,\n fetchedPhotoScanStatus: true,\n statusPhotoScan: action.payload\n };\n }\n\n case \"FETCH_AUTO_ALBUM_PROCESSING_STATUS\": {\n return { ...state, fetchingAutoAlbumProcessingStatus: true };\n }\n case \"FETCH_AUTO_ALBUM_PROCESSING_STATUS_REJECTED\": {\n return {\n ...state,\n fetchingAutoAlbumProcessingStatus: false,\n error: action.payload\n };\n }\n case \"FETCH_AUTO_ALBUM_PROCESSING_STATUS_FULFILLED\": {\n return {\n ...state,\n fetchingAutoAlbumProcessingStatus: false,\n fetchedAutoAlbumProcessingStatus: true,\n statusAutoAlbumProcessing: action.payload\n };\n }\n\n default: {\n return { ...state };\n }\n }\n}\n\n// FETCH_LOCATION_CLUSTERS\n// FETCH_LOCATION_CLUSTERS_REJECTED\n// FETCH_LOCATION_CLUSTERS_FULFILLED\n" }, { "path": "src/registerServiceWorker.js", "content": "// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register() {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (!isLocalhost) {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n } else {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n" }, { "path": "src/routerExample.js", "content": "import React from 'react'\nimport {\n BrowserRouter as Router,\n Route,\n Link\n} from 'react-router-dom'\n\nconst BasicExample = () => (\n \n
\n
    \n
  • Home
    • \n
  • About
    • \n
  • Topics
    • \n
\n\n
\n\n \n \n \n
\n \n)\n\nconst Home = () => (\n
\n

Home

\n
\n)\n\nconst About = () => (\n
\n

About

\n
\n)\n\nconst Topics = ({ match }) => (\n
\n

Topics

\n
    \n
  • \n \n Rendering with React\n \n
    • \n
  • \n \n Components\n \n
    • \n
  • \n \n Props v. State\n \n
    • \n
\n\n \n (\n

Please select a topic.

\n )}/>\n
\n)\n\nconst Topic = ({ match }) => (\n
\n

{match.params.topicId}

\n
\n)\n\nexport default BasicExample" }, { "path": "src/routes/index.js", "content": "import React from 'react'; \nimport { Route, Redirect } from 'react-router-dom' \n\nimport {Sidebar} from './layouts/sidebar'\n\nimport {AlbumPeopleGallery, AlbumAutoGallery} from './components/album'\n\nimport {Statistics} from './layouts/statistics'\nimport {FacesDashboard} from './layouts/facesDashboard'\nimport {PeopleDashboard} from './layouts/peopleDashboard'\nimport {AlbumAuto} from './layouts/albumAuto'\nimport {AlbumPeople} from './layouts/albumPeople'\n\nimport {AlbumsAutoListCardView} from './layouts/albumsAutoListCardView'\n\nimport {AlbumAutoGalleryView} from './layouts/albumAutoGalleryView'\nimport {AlbumDateGalleryView} from './layouts/albumDateGalleryView'\nimport {AlbumAutoMonths} from './layouts/albumAutoMonths'\nimport {AlbumDateMonths} from './layouts/albumDateMonths'\n\nimport {AllPhotosView} from './layouts/allPhotosView'\nimport {AllPhotosGroupedByDate} from './layouts/allPhotosGroupedByDate'\n\nimport {FavoriteAutoAlbumsView} from './layouts/favoriteAutoAlbums'\n\nimport EventCountMonthGraph from './components/eventCountMonthGraph'\n\nimport {ListExample} from './layouts/RVListExample'\n\nimport {PhotosListCardView} from './layouts/allPhotosViewRV'\nimport {ChartyPhotosScrollbar} from './components/chartyPhotosScrollbar'\n\nimport {AllPhotosViewLL} from './layouts/allPhotosViewLL'\n\nimport {LoginPage} from './layouts/loginPage'\n\n\n\nexport default function configRoutes() { \n return (\n
\n \n \n \n \n
\n );\n}\n\nconst AuthenticatedRoute = ({ component: Component, ...rest }) => ( \n (\n localStorage.getItem('phoenixAuthToken') ? (\n \n ) : (\n \n )\n )}/>\n)" }, { "path": "src/store.js", "content": "import { applyMiddleware, createStore } from 'redux';\nimport promise from \"redux-promise-middleware\";\nimport thunk from \"redux-thunk\"\nimport { createLogger } from \"redux-logger\";\nimport storage from 'redux-persist/es/storage'\n// import { apiMiddleware } from 'redux-api-middleware';\nimport { createFilter } from 'redux-persist-transform-filter';\nimport { persistReducer, persistStore } from 'redux-persist'\nimport rootReducer from \"./reducers\";\nimport history from './history'\nimport { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'\nimport apiMiddleware from './middleware';\n\n//const middleware = applyMiddleware( thunk, createLogger(), apiMiddleware, routerMiddleware(history) );\n//export default createStore(reducer, middleware);\n\n\n\n\nconst configureStore = (history) => {\n const persistedFilter = createFilter(\n 'auth', ['access', 'refresh']);\n\n const reducer = persistReducer(\n {\n key: 'polls',\n storage: storage,\n whitelist: ['auth'],\n transforms: [persistedFilter]\n },\n rootReducer)\n\n const store = createStore(\n reducer, {},\n applyMiddleware( \n thunk, \n createLogger(), \n // apiMiddleware, \n routerMiddleware(history) )\n )\n\n persistStore(store)\n\n return store\n}\n\nexport default configureStore(history)\n" }, { "path": "src/util/countryNames.js", "content": "export const countryNames = [\n\t\"afghanistan\",\n\t\"af\",\n\t\"aland islands\",\n\t\"ax\",\n\t\"albania\",\n\t\"al\",\n\t\"algeria\",\n\t\"dz\",\n\t\"american samoa\",\n\t\"as\",\n\t\"andorra\",\n\t\"ad\",\n\t\"angola\",\n\t\"ao\",\n\t\"anguilla\",\n\t\"ai\",\n\t\"antigua\",\n\t\"ag\",\n\t\"argentina\",\n\t\"ar\",\n\t\"armenia\",\n\t\"am\",\n\t\"aruba\",\n\t\"aw\",\n\t\"australia\",\n\t\"au\",\n\t\"austria\",\n\t\"at\",\n\t\"azerbaijan\",\n\t\"az\",\n\t\"bahamas\",\n\t\"bs\",\n\t\"bahrain\",\n\t\"bh\",\n\t\"bangladesh\",\n\t\"bd\",\n\t\"barbados\",\n\t\"bb\",\n\t\"belarus\",\n\t\"by\",\n\t\"belgium\",\n\t\"be\",\n\t\"belize\",\n\t\"bz\",\n\t\"benin\",\n\t\"bj\",\n\t\"bermuda\",\n\t\"bm\",\n\t\"bhutan\",\n\t\"bt\",\n\t\"bolivia\",\n\t\"bo\",\n\t\"bosnia\",\n\t\"ba\",\n\t\"botswana\",\n\t\"bw\",\n\t\"bouvet island\",\n\t\"bv\",\n\t\"brazil\",\n\t\"br\",\n\t\"british virgin islands\",\n\t\"vg\",\n\t\"brunei\",\n\t\"bn\",\n\t\"bulgaria\",\n\t\"bg\",\n\t\"burkina faso\",\n\t\"bf\",\n\t\"burma\",\n\t\"mm\",\n\t\"myanmar\",\n\t\"burundi\",\n\t\"bi\",\n\t\"caicos islands\",\n\t\"tc\",\n\t\"cambodia\",\n\t\"kh\",\n\t\"cameroon\",\n\t\"cm\",\n\t\"canada\",\n\t\"ca\",\n\t\"cape verde\",\n\t\"cv\",\n\t\"cayman islands\",\n\t\"ky\",\n\t\"central african republic\",\n\t\"cf\",\n\t\"chad\",\n\t\"td\",\n\t\"chile\",\n\t\"cl\",\n\t\"china\",\n\t\"cn\",\n\t\"christmas island\",\n\t\"cx\",\n\t\"cocos islands\",\n\t\"cc\",\n\t\"colombia\",\n\t\"co\",\n\t\"comoros\",\n\t\"km\",\n\t\"congo\",\n\t\"cd\",\n\t\"congo brazzaville\",\n\t\"cg\",\n\t\"cook islands\",\n\t\"ck\",\n\t\"costa rica\",\n\t\"cr\",\n\t\"cote divoire\",\n\t\"ci\",\n\t\"croatia\",\n\t\"hr\",\n\t\"cuba\",\n\t\"cu\",\n\t\"cyprus\",\n\t\"cy\",\n\t\"czech republic\",\n\t\"cz\",\n\t\"denmark\",\n\t\"dk\",\n\t\"djibouti\",\n\t\"dj\",\n\t\"dominica\",\n\t\"dm\",\n\t\"dominican republic\",\n\t\"do\",\n\t\"ecuador\",\n\t\"ec\",\n\t\"egypt\",\n\t\"eg\",\n\t\"el salvador\",\n\t\"sv\",\n\t\"equatorial guinea\",\n\t\"gq\",\n\t\"eritrea\",\n\t\"er\",\n\t\"estonia\",\n\t\"ee\",\n\t\"ethiopia\",\n\t\"et\",\n\t\"europeanunion\",\n\t\"eu\",\n\t\"falkland islands\",\n\t\"fk\",\n\t\"faroe islands\",\n\t\"fo\",\n\t\"fiji\",\n\t\"fj\",\n\t\"finland\",\n\t\"fi\",\n\t\"france\",\n\t\"fr\",\n\t\"french guiana\",\n\t\"gf\",\n\t\"french polynesia\",\n\t\"pf\",\n\t\"french territories\",\n\t\"tf\",\n\t\"gabon\",\n\t\"ga\",\n\t\"gambia\",\n\t\"gm\",\n\t\"georgia\",\n\t\"ge\",\n\t\"germany\",\n\t\"de\",\n\t\"ghana\",\n\t\"gh\",\n\t\"gibraltar\",\n\t\"gi\",\n\t\"greece\",\n\t\"gr\",\n\t\"greenland\",\n\t\"gl\",\n\t\"grenada\",\n\t\"gd\",\n\t\"guadeloupe\",\n\t\"gp\",\n\t\"guam\",\n\t\"gu\",\n\t\"guatemala\",\n\t\"gt\",\n\t\"guinea\",\n\t\"gn\",\n\t\"guinea-bissau\",\n\t\"gw\",\n\t\"guyana\",\n\t\"gy\",\n\t\"haiti\",\n\t\"ht\",\n\t\"heard island\",\n\t\"hm\",\n\t\"honduras\",\n\t\"hn\",\n\t\"hong kong\",\n\t\"hk\",\n\t\"hungary\",\n\t\"hu\",\n\t\"iceland\",\n\t\"is\",\n\t\"india\",\n\t\"in\",\n\t\"indian ocean territory\",\n\t\"io\",\n\t\"indonesia\",\n\t\"id\",\n\t\"iran\",\n\t\"ir\",\n\t\"iraq\",\n\t\"iq\",\n\t\"ireland\",\n\t\"ie\",\n\t\"israel\",\n\t\"il\",\n\t\"italy\",\n\t\"it\",\n\t\"jamaica\",\n\t\"jm\",\n\t\"jan mayen\",\n\t\"sj\",\n\t\"svalbard\",\n\t\"japan\",\n\t\"jp\",\n\t\"jordan\",\n\t\"jo\",\n\t\"kazakhstan\",\n\t\"kz\",\n\t\"kenya\",\n\t\"ke\",\n\t\"kiribati\",\n\t\"ki\",\n\t\"kuwait\",\n\t\"kw\",\n\t\"kyrgyzstan\",\n\t\"kg\",\n\t\"laos\",\n\t\"la\",\n\t\"latvia\",\n\t\"lv\",\n\t\"lebanon\",\n\t\"lb\",\n\t\"lesotho\",\n\t\"ls\",\n\t\"liberia\",\n\t\"lr\",\n\t\"libya\",\n\t\"ly\",\n\t\"liechtenstein\",\n\t\"li\",\n\t\"lithuania\",\n\t\"lt\",\n\t\"luxembourg\",\n\t\"lu\",\n\t\"macau\",\n\t\"mo\",\n\t\"macedonia\",\n\t\"mk\",\n\t\"madagascar\",\n\t\"mg\",\n\t\"malawi\",\n\t\"mw\",\n\t\"malaysia\",\n\t\"my\",\n\t\"maldives\",\n\t\"mv\",\n\t\"mali\",\n\t\"ml\",\n\t\"malta\",\n\t\"mt\",\n\t\"marshall islands\",\n\t\"mh\",\n\t\"martinique\",\n\t\"mq\",\n\t\"mauritania\",\n\t\"mr\",\n\t\"mauritius\",\n\t\"mu\",\n\t\"mayotte\",\n\t\"yt\",\n\t\"mexico\",\n\t\"mx\",\n\t\"micronesia\",\n\t\"fm\",\n\t\"moldova\",\n\t\"md\",\n\t\"monaco\",\n\t\"mc\",\n\t\"mongolia\",\n\t\"mn\",\n\t\"montenegro\",\n\t\"me\",\n\t\"montserrat\",\n\t\"ms\",\n\t\"morocco\",\n\t\"ma\",\n\t\"mozambique\",\n\t\"mz\",\n\t\"namibia\",\n\t\"na\",\n\t\"nauru\",\n\t\"nr\",\n\t\"nepal\",\n\t\"np\",\n\t\"netherlands\",\n\t\"nl\",\n\t\"netherlandsantilles\",\n\t\"an\",\n\t\"new caledonia\",\n\t\"nc\",\n\t\"new guinea\",\n\t\"pg\",\n\t\"new zealand\",\n\t\"nz\",\n\t\"nicaragua\",\n\t\"ni\",\n\t\"niger\",\n\t\"ne\",\n\t\"nigeria\",\n\t\"ng\",\n\t\"niue\",\n\t\"nu\",\n\t\"norfolk island\",\n\t\"nf\",\n\t\"north korea\",\n\t\"kp\",\n\t\"northern mariana islands\",\n\t\"mp\",\n\t\"norway\",\n\t\"no\",\n\t\"oman\",\n\t\"om\",\n\t\"pakistan\",\n\t\"pk\",\n\t\"palau\",\n\t\"pw\",\n\t\"palestine\",\n\t\"ps\",\n\t\"panama\",\n\t\"pa\",\n\t\"paraguay\",\n\t\"py\",\n\t\"peru\",\n\t\"pe\",\n\t\"philippines\",\n\t\"ph\",\n\t\"pitcairn islands\",\n\t\"pn\",\n\t\"poland\",\n\t\"pl\",\n\t\"portugal\",\n\t\"pt\",\n\t\"puerto rico\",\n\t\"pr\",\n\t\"qatar\",\n\t\"qa\",\n\t\"reunion\",\n\t\"re\",\n\t\"romania\",\n\t\"ro\",\n\t\"russia\",\n\t\"ru\",\n\t\"rwanda\",\n\t\"rw\",\n\t\"saint helena\",\n\t\"sh\",\n\t\"saint kitts and nevis\",\n\t\"kn\",\n\t\"saint lucia\",\n\t\"lc\",\n\t\"saint pierre\",\n\t\"pm\",\n\t\"saint vincent\",\n\t\"vc\",\n\t\"samoa\",\n\t\"ws\",\n\t\"san marino\",\n\t\"sm\",\n\t\"sandwich islands\",\n\t\"gs\",\n\t\"sao tome\",\n\t\"st\",\n\t\"saudi arabia\",\n\t\"sa\",\n\t\"scotland\",\n\t\"gb sct\",\n\t\"senegal\",\n\t\"sn\",\n\t\"serbia\",\n\t\"cs\",\n\t\"serbia\",\n\t\"rs\",\n\t\"seychelles\",\n\t\"sc\",\n\t\"sierra leone\",\n\t\"sl\",\n\t\"singapore\",\n\t\"sg\",\n\t\"slovakia\",\n\t\"sk\",\n\t\"slovenia\",\n\t\"si\",\n\t\"solomon islands\",\n\t\"sb\",\n\t\"somalia\",\n\t\"so\",\n\t\"south africa\",\n\t\"za\",\n\t\"south korea\",\n\t\"kr\",\n\t\"spain\",\n\t\"es\",\n\t\"sri lanka\",\n\t\"lk\",\n\t\"sudan\",\n\t\"sd\",\n\t\"suriname\",\n\t\"sr\",\n\t\"swaziland\",\n\t\"sz\",\n\t\"sweden\",\n\t\"se\",\n\t\"switzerland\",\n\t\"ch\",\n\t\"syria\",\n\t\"sy\",\n\t\"taiwan\",\n\t\"tw\",\n\t\"tajikistan\",\n\t\"tj\",\n\t\"tanzania\",\n\t\"tz\",\n\t\"thailand\",\n\t\"th\",\n\t\"timorleste\",\n\t\"tl\",\n\t\"togo\",\n\t\"tg\",\n\t\"tokelau\",\n\t\"tk\",\n\t\"tonga\",\n\t\"to\",\n\t\"trinidad\",\n\t\"tt\",\n\t\"tunisia\",\n\t\"tn\",\n\t\"turkey\",\n\t\"tr\",\n\t\"turkmenistan\",\n\t\"tm\",\n\t\"tuvalu\",\n\t\"tv\",\n\t\"u.a.e.\",\n\t\"ae\",\n\t\"united arab emirates\",\n\t\"uganda\",\n\t\"ug\",\n\t\"ukraine\",\n\t\"ua\",\n\t\"united kingdom\",\n\t\"gb\",\n\t\"united states\",\n\t\"us\",\n\t\"america\",\n\t\"uruguay\",\n\t\"uy\",\n\t\"us minor islands\",\n\t\"um\",\n\t\"us virgin islands\",\n\t\"vi\",\n\t\"uzbekistan\",\n\t\"uz\",\n\t\"vanuatu\",\n\t\"vu\",\n\t\"vatican city\",\n\t\"va\",\n\t\"venezuela\",\n\t\"ve\",\n\t\"vietnam\",\n\t\"vn\",\n\t\"wales\",\n\t\"gb wls\",\n\t\"wallis and futuna\",\n\t\"wf\",\n\t\"western sahara\",\n\t\"eh\",\n\t\"yemen\",\n\t\"ye\",\n\t\"zambia\",\n\t\"zm\",\n\t\"zimbabwe\",\n\t\"zw\"]" }, { "path": "src/util/fuzzyMatch.js", "content": "export const fuzzy_match = (str,pattern) => {\n if (pattern.split(\"\").length > 0) {\n pattern = pattern.split(\"\").reduce(function(a,b){ return a+\".*\"+b; });\n return (new RegExp(pattern)).test(str);\n } else {\n return false\n }\n};\n" }, { "path": "src/util/gridUtils.js", "content": "import store from '../store'\nimport _ from 'lodash'\n\nstore.subscribe(listener)\n\nfunction select(state) {\n return state.ui\n}\n\nvar gridType = 'dense'\n\nfunction listener() {\n var ui = select(store.getState())\n gridType = ui.gridType\n}\n\n\nexport const calculateSharedPhotoGridCells = (groupedBySharerList,itemsPerRow) => {\n var gridContents = []\n var rowCursor = []\n \n groupedBySharerList.forEach((group)=>{\n gridContents.push([group])\n var currRowIdx = gridContents.length\n _.reverse(_.sortBy(group.photos,'exif_timestamp')).forEach((photo,idx)=>{\n if (idx === 0 ) {\n rowCursor = []\n }\n if (idx > 0 && idx % itemsPerRow === 0) {\n gridContents.push(rowCursor)\n }\n if (idx % itemsPerRow === 0) {\n rowCursor = []\n }\n rowCursor.push(photo)\n if (idx === group.photos.length-1) {\n gridContents.push(rowCursor) \n }\n \n })\n })\n return {cellContents:gridContents}\n}\n\nexport const calculateSharedAlbumGridCells = (groupedBySharerList,itemsPerRow) => {\n var gridContents = []\n var rowCursor = []\n \n groupedBySharerList.forEach((group)=>{\n gridContents.push([group])\n var currRowIdx = gridContents.length\n group.albums.forEach((album,idx)=>{\n if (idx === 0 ) {\n rowCursor = []\n }\n if (idx > 0 && idx % itemsPerRow === 0) {\n gridContents.push(rowCursor)\n }\n if (idx % itemsPerRow === 0) {\n rowCursor = []\n }\n rowCursor.push(album)\n if (idx === group.albums.length-1) {\n gridContents.push(rowCursor) \n }\n })\n })\n return {cellContents:gridContents}\n}\n\n\nexport const calculateGridCells = (groupedByDateList,itemsPerRow) => {\n var gridContents = []\n var rowCursor = []\n var hash2row = {}\n \n groupedByDateList.forEach((day)=>{\n gridContents.push([day])\n var currRowIdx = gridContents.length\n day.photos.forEach((photo,idx)=>{\n if (idx === 0 ) {\n rowCursor = []\n }\n if (idx > 0 && idx % itemsPerRow === 0) {\n gridContents.push(rowCursor)\n }\n if (idx % itemsPerRow === 0) {\n rowCursor = []\n }\n rowCursor.push(photo)\n hash2row[[photo.image_hash]] = currRowIdx\n if (idx === day.photos.length-1) {\n gridContents.push(rowCursor) \n }\n \n })\n })\n return {cellContents:gridContents,hash2row:hash2row}\n }\n \n\nexport const calculateGridCellSize = (gridWidth) => {\n var numEntrySquaresPerRow\n \n if (gridType==='dense') {\n if (gridWidth < 600) {\n numEntrySquaresPerRow = 2\n } \n else if (gridWidth < 800) {\n numEntrySquaresPerRow = 3\n }\n else if (gridWidth < 1000) {\n numEntrySquaresPerRow = 5\n }\n else if (gridWidth < 1200) {\n numEntrySquaresPerRow = 7\n }\n else {\n numEntrySquaresPerRow = 8 \n }\n } else {\n if (gridWidth < 600) {\n numEntrySquaresPerRow = 1\n } \n else if (gridWidth < 800) {\n numEntrySquaresPerRow = 2\n }\n else if (gridWidth < 1000) {\n numEntrySquaresPerRow = 3\n }\n else if (gridWidth < 1200) {\n numEntrySquaresPerRow = 4\n }\n else {\n numEntrySquaresPerRow = 4\n }\n }\n\n\n\n var entrySquareSize = gridWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n\n return {\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n }\n\n}\n\n\n\n\nexport const calculateFaceGridCells = (groupedByPersonList,itemsPerRow) => {\n var gridContents = []\n var rowCursor = []\n var hash2row = {}\n \n groupedByPersonList.forEach((person)=>{\n gridContents.push([person])\n var currRowIdx = gridContents.length\n person.faces.forEach((face,idx)=>{\n if (idx === 0 ) {\n rowCursor = []\n }\n if (idx > 0 && idx % itemsPerRow === 0) {\n gridContents.push(rowCursor)\n }\n if (idx % itemsPerRow === 0) {\n rowCursor = []\n }\n rowCursor.push(face)\n hash2row[[face.image_hash]] = currRowIdx\n if (idx === person.faces.length-1) {\n gridContents.push(rowCursor) \n }\n \n })\n })\n return {cellContents:gridContents,hash2row:hash2row}\n }\n\n\n\n\nexport const calculateFaceGridCellSize = (gridWidth) => {\n var numEntrySquaresPerRow\n if (gridWidth < 300) {\n numEntrySquaresPerRow = 2\n } \n else if (gridWidth < 600) {\n numEntrySquaresPerRow = 3\n } \n else if (gridWidth < 800) {\n numEntrySquaresPerRow = 4\n }\n else if (gridWidth < 1000) {\n numEntrySquaresPerRow = 6\n }\n else if (gridWidth < 1200) {\n numEntrySquaresPerRow = 8\n }\n else {\n numEntrySquaresPerRow = 10\n }\n\n var entrySquareSize = gridWidth / numEntrySquaresPerRow\n var numEntrySquaresPerRow = numEntrySquaresPerRow\n\n return {\n entrySquareSize: entrySquareSize,\n numEntrySquaresPerRow: numEntrySquaresPerRow\n }\n\n}\n" }, { "path": "src/util/scrollUtils.js", "content": "export class ScrollSpeed {\n clear = () => {\n this.lastPosition = null;\n this.delta = 0;\n };\n getScrollSpeed(scrollOffset) {\n if (this.lastPosition != null) {\n this.delta = scrollOffset - this.lastPosition;\n }\n this.lastPosition = scrollOffset;\n \n window.clearTimeout(this._timeout);\n this._timeout = window.setTimeout(this.clear, 50);\n \n return this.delta;\n }\n clearTimeout() {\n window.clearTimeout(this._timeout)\n }\n }\n \nexport const SPEED_THRESHOLD = 500; // Tweak this to whatever feels right for your app\nexport const SCROLL_DEBOUNCE_DURATION = 250; // In milliseconds\n " }, { "path": "src/util/util.js", "content": "export const copyToClipboard = str => {\n const el = document.createElement(\"textarea\");\n el.value = str;\n document.body.appendChild(el);\n el.select();\n document.execCommand(\"copy\");\n document.body.removeChild(el);\n};\n" } ]