From 4f85055c7433b8bd175fa86f2f12dd55c0fde4fe Mon Sep 17 00:00:00 2001 From: Shai Mor Date: Tue, 9 Sep 2014 15:13:53 -0400 Subject: [PATCH] styled create map forms --- app/assets/application-bkup.css | 1778 ----------------- app/assets/base-bkup.css | 639 ------ .../javascripts/metamaps/Metamaps.GlobalUI.js | 3 + app/assets/stylesheets/application.css | 191 +- app/views/layouts/_newmap.html.erb | 56 +- app/views/shared/_forkmap.html.erb | 55 +- 6 files changed, 143 insertions(+), 2579 deletions(-) delete mode 100644 app/assets/application-bkup.css delete mode 100644 app/assets/base-bkup.css diff --git a/app/assets/application-bkup.css b/app/assets/application-bkup.css deleted file mode 100644 index ca3caae3..00000000 --- a/app/assets/application-bkup.css +++ /dev/null @@ -1,1778 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the top of the - * compiled file, but it's generally better to create a new file per style scope. - * - *= require_self - *= require_tree . - *= require base - *= require jquery.mCustomScrollbar - *= require jquery-ui -*/ - -/* clear styles */ - -html, -body, -div, -h1, -h2, -h3, -h4, -h5, -h6, -ul, -ol, -dl, -li, -dt, -dd, -p, -blockquote, -pre, -form, -fieldset, -table, -th, -td, -legend { - margin: 0; - padding: 0; -} -img { - border: 0; - padding: 0; - margin: 0; - display: block; - text-indent: -9999px; -} -html, -body, -.main, -.wrapper { - height: 100%; -} -.wrapper.homePage { - /*background: url('mm-homepage-bg-image.png') no-repeat center -249px;*/ -} -.wrapper.mapPage { - overflow: hidden; -} -/* scrollbar override */ - -.mCS_no_scrollbar { - padding-right: 0px !important; -} -.mCSB_container { - margin-right: 15px !important; -} -/* forgot password fix */ - -.forgotPassword input[type="submit"] { - padding: 0 5px; - width: auto; -} -html { - -} -body { - background: #d8d9da url(shattered_@2X.png); - font-family: 'din-medium', helvetica, sans-serif; - color: #424242; -} - - -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: normal; -} -h1 { - display: block; - text-align: left; - font-family: "vinyl", sans-serif; -} -h2 { - display: block; - text-align: center; - font-family: "katarine-web", sans-serif; - background: url('black_bg.png'); - font-size: 24px; - line-height: 35px; -} -a { - color: #424242; - text-decoration: none; -} -button.button, -a.button, -input[type="submit"] { - border: none; - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); - box-shadow: 0 1px 2px rgba(0, 0, 0, .2); - border: none; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - height: 30px; - outline: none; - padding: 0 0; - width: 60px; - -webkit-box-shadow: none; - box-shadow: none; - background: #AEA9FD; - vertical-align: top; - color: black; - margin: 0px; - cursor: pointer; - display: inline-block; - font-weight: bold; - line-height: 29px; - min-width: 54px; - text-align: center; - text-decoration: none; - -webkit-border-radius: 2px; - border-radius: 2px; - -webkit-user-select: none; -} -button.button:hover, -a.button:hover, -input[type="submit"]:hover { - background: #B6B2FD; -} -/* - * Utility - */ - -.clearfloat { - clear: both; -} -.leaveSpace { - display: block; - height: 50px; -} -.hidden { - display: none; -} -/* - * Layout stuffs - */ - -/*#barometer_tab { - display: none; -}*/ - -#error_explanation { - background: #612127; - padding: 30px; - color: #FFF; -} -#error_explanation h2 { - display: none; -} -#error_explanation ul { - list-style: none; -} -.profile { - height: 100%; - margin-bottom: 50px; -} -.centeredProfile { - margin: 0 auto; - display: block; - width: 830px; -} -.requestInvite { - display: block; - margin: -720px auto 0; -} -.new_session, -.new_user, -.edit_user, -.forgotPassword { - display: block; - width: 250px; - background-color: #E0E0E0; - padding: 20px; - border-radius: 5px; - color: black; - box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4); -} -.centerGreyForm input[type="text"], -.centerGreyForm input[type="email"], -.centerGreyForm input[type="password"] { - width: 250px; - height: 32px; - font-size: 15px; - direction: ltr; - -webkit-appearance: none; - appearance: none; - display: inline-block; - margin: 0; - padding: 0 8px; - background: #fff; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - font: -webkit-small-control; - color: initial; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - display: inline-block; - text-align: start; -} -.centerGreyForm input[type="text"]:hover, -.centerGreyForm input[type="email"]:hover, -.centerGreyForm input[type="password"]:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -#closenewtopic, -#closenewsynapse { - position: absolute; - top: 3px; - right: 3px; -} -.new_topic { - /* start it off screen while it initializes the spinner, then it will be hidden with jquery */ - top: -1000px; - left: -1000px; - display: block; - position: absolute; - width: 300px; - margin: -40px 0 0 -50px; -} -.new_synapse { - display: none; - position: absolute; -} -#new_topic .twitter-typeahead { - position: absolute !important; - top: 40px; - left: 50px; - z-index: 9999; - width: 202px; - height: 37px; - font-family: ':atp'; -} -.new_topic #topic_name, -.new_topic .tt-hint { - width: 190px; - background: rgba(0, 0, 0, 0.8); - height: 25px; - margin: 0; - padding: 5px 5px; - border: 1px solid black; - outline: none; - font-size: 25px; - line-height: 35px; - color: rgba(255, 255, 255, 0.7); - font-family: 'LatoLight'; -} -.openMetacodeSwitcher { - display: block; - height: 20px; - width: 20px; - background-image: url('MMCCicon_metacode_set_change.png'); - background-size: contain; - position: absolute; - z-index: 2; - top: 20px; - left: 30px; -} -#metacodeImg { - height: 120px; -} -#metacodeImgTitle { - float: left; - width: 120px; - text-align: center; - margin-left: 90px; - font-family: 'LatoRegular'; -} -/* synapse autocomplete */ - -.new_topic #topic_name { - color: white; -} -.new_topic .tt-hint { - color: grey; -} -.new_topic #topic_name, -.new_topic .tt-hint { - width: 190px; - background: rgba(0, 0, 0, 0.8); - height: 25px; - margin: 0; - padding: 5px 5px; - border: 1px solid black; - outline: none; - font-size: 18px; - line-height: 35px; - font-family: 'LatoRegular'; -} -.new_synapse #synapse_desc { - color: rgba(255, 255, 255, 0.7); -} -.new_synapse .tt-hint { - color: rgba(255, 255, 255, 0.4); -} -.new_synapse #synapse_desc, -.new_synapse .tt-hint { - width: 200px; - background: rgba(0, 0, 0, 0.8); - height: 18px; - margin: 0; - padding: 5px 5px; - border: 1px solid black; - outline: none; - font-size: 16px; - line-height: 20px; - font-family: 'LatoRegular'; -} -label, -select, -input, -textarea { - display: block; -} -label { - margin-top: 10px; - margin-bottom: 4px; -} -input[type="submit"] { - margin-top: 5px; -} -#user_remember_me { - margin-top: 11px; -} -#user_remember_me, -label[for="user_remember_me"] { - float: left; -} -.contentarea p, -.contentarea ul, -.contentarea ol, -.contentarea table { - font-size: 14px; - line-height: 1.55em; - padding: 0.5em 0 -} -.contentarea ul li { - padding: 0.2em 0; -} -.contentarea ol li { - padding: 0.2em 0; -} -.contentarea ul { - margin: 0 0 0 1em; -} -.contentarea ol { - margin: 0 0 0 1.3em; -} -.main { - /*overflow:hidden; */ -} -#infovis-canvas { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* --- top options --*/ - -.headertop { - display: block; - position: fixed; - top: 20px; - z-index: 10; - border-radius: 5px; - margin: 10px 0px 10px 10px; - background: #111614; - padding: 5px 10px; - box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.4); -} -.headertop .tab { - background: url(tab.png) no-repeat 0 0; - position: absolute; - top: -11px; - right: -2px; - display: block; - width: 45px; - height: 15px; - cursor: move; -} -.headertop button, -.headertop input { - height: 30px; - background: none; - color: #717474; - font-family: 'LatoLight'; - font-size: 17px; - border: none; - border-right: 1px solid #717474; - cursor: pointer; - margin: 3px 0; - clear: both; - float: right; -} -.headertop button:hover, -.headertop input:hover { - border-right: 1px solid #6d7310; - color: #6d7310; -} -.wrapper { - display: block; - height: 100%; - margin: 0 0; -} - -/* account */ - -.sidebarAccount { - width: 32px; - height: 32px; -} -.unauthenticated .sidebarAccount { - width: 84px; - box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); - border-radius: 2px; -} -.sidebarAccountIcon { - cursor: pointer; -} -.authenticated .sidebarAccountIcon { - height: 32px; - width: 32px; -} -.unauthenticated .sidebarAccountIcon { - width: 66px; - height: 14px; - padding: 9px; - border-radius: 2px; - background-color: #E0E0E0; - color: #424242; - text-transform: uppercase; - text-align: center; - font-size: 14px; - line-height: 14px; -} -.sidebarAccountIcon img { - border-radius: 17px; -} -.sidebarAccountBox { - display: none; - height: auto; - padding: 10px; - min-width: 120px; -} -.authenticated .sidebarAccountBox { - width: auto; -} -.unauthenticated .sidebarAccountBox { - width: 200px; -} -.sidebarAccountBox h3 { - font-family: 'vinyl', helvetica, sans-serif; - text-transform: uppercase; - font-style: italic; -} -.sidebarAccountBox ul { - list-style: none; -} -.sidebarAccountBox li.accountIcon { - padding: 0; - background-size: 18px 18px; - background-repeat: no-repeat; - background-position: 0px 6px; - font-size: 18px; - line-height: 20px; -} -li.accountIcon:hover { - background-position: 4px 6px; -} -li.accountMaps { - background-image: url('MMCCicon_map.png'); -} -li.accountSettings { - background-image: url('usersettings.png'); -} -li.accountAdmin { - background-image: url('MMCCicon_admin.png'); -} -li.accountInvite { - background-image: url('MMCCicon_invite.png'); -} -li.accountLogout { - background-image: url('MMCCicon_logout.png'); -} -li.accountIcon a { - display: block; - padding: 6px 0 6px 25px; -} -li.accountInvite span { - display: block; - padding: 6px 0 6px 25px; -} -.sidebarAccountBox a { - -} -.sidebarAccountBox input[type="email"], -.sidebarAccountBox input[type="password"] { - width: 200px; - height: 32px; - font-size: 15px; - direction: ltr; - -webkit-appearance: none; - appearance: none; - display: inline-block; - margin: 0; - padding: 0 8px; - background: #fff; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - font: -webkit-small-control; - color: initial; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - display: inline-block; - text-align: start; -} -.sidebarAccountBox input[type="email"]:hover, -.sidebarAccountBox input[type="password"]:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -.sidebarAccountBox .links a { - display: block; - margin-top: 5px; -} -/* Save To New Map */ - -.sidebarFork { - width: 32px; - height: 32px; -} -.sidebarForkIcon { - position: absolute; - width: 32px; - height: 32px; - background: url('fork.png') no-repeat center center; - background-size: 32px 32px; - cursor: pointer; -} -.sidebarForkIcon:hover {} - -.sidebarFork .hoverForTip:hover .tip { - display: block; -} -.sidebarFork .tip { - display: none; - position: absolute; - background: black; - text-align: center; - top: 36px; - right: 0; - color: white; - border-radius: 4px; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 17px; - padding: 3px 5px 2px; - z-index: 100; -} -/* end Save To New Map */ - -/* Filter */ - -.sidebarFilter { - width: 32px; - height: 32px; -} - -.sidebarFilterIcon { - position: absolute; - width: 32px; - height: 32px; - background: url('filter.png') no-repeat center center; - background-size: 32px 32px; - cursor: pointer; -} -.sidebarFilterIcon:hover { - -} - -.sidebarFilterBox { - display:none; - height: 400px; - width: 320px; - padding: 10px; - text-align: center; - overflow-y: auto; -} -h3.filterBox { - text-align: left; - float: left; -} -.sidebarFilterBox span { - float: right; - background: #15bad4; - padding: 1px 4px; - border-radius: 2px; - margin-left: 5px; - cursor: pointer; -} -.sidebarFilterBox ul { - list-style: none; -} -.sidebarFilterBox li { - float: left; - width: 61px; - height: 70px; - cursor: pointer; -} -.sidebarFilterBox li:hover { - background: #000; -} -.sidebarFilterBox li img { - background-color: rgba(255, 255, 255, 0.1); - width: 45px; - height: 45px; - margin: 0 auto; -} -.sidebarFilterBox li p { - font-size: 11px; - line-height: 11px; - font-family: arial, sans-serif; -} -.sidebarFilterBox li.toggledOff { - opacity: 0.4; -} -.sidebarFilterBox h3 { - text-align: left; - text-transform: uppercase; - font-weight: bold; -} -#filter_by_metacode { - border-bottom: 1px solid black; - margin: 5px; -} -#filter_by_mapper { - margin: 5px auto; -} -#filter_by_synapse { - margin: 5px auto; - border-bottom: 1px solid black; -} -/* end filter by metacode */ - -/* collaborate */ - -.sidebarCollaborate { - width: 32px; - height: 32px; -} -.sidebarCollaborateIcon { - position: absolute; - width: 32px; - height: 32px; - background-image: url('junto32.png'); - background-size: 32px 32px; - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; -} -.sidebarCollaborateIcon.blue { - background-image: url('junto32.png'); -} -.sidebarCollaborateBox { - display: none; - height: auto; - width: auto; - padding: 10px; - min-width: 180px; -} -h3.realtimeBoxTitle { - margin-bottom: 10px; - text-align: left; - float: left; - font-family: 'Lato', helvetica, sans-serif; -} -.sidebarCollaborateBox .realtimeOnOff { - float: left; - padding: 4px; - border-radius: 2px; - margin-left: 12px; - cursor: pointer; - width: 31px; - text-align: center; -} -.sidebarCollaborateBox .rtOff { - background: white; - color: black; -} -.sidebarCollaborateBox .rtOff:hover { - padding: 3px; - border: 1px solid #15bad4; -} -.sidebarCollaborateBox .rtOn { - background: #15bad4; - color: white; -} -.realtimeMapperList .rtMapper { - list-style-type: none; - white-space: nowrap; - padding: 2px 5px 2px 30px; - display: block; - background-size: 26px 26px; - background-repeat: no-repeat; - background-position: 4px center; - margin-bottom: 5px; -} -.realtimeMapperList .littleRtOff { - background-image: url('junto24.png'); -} -.realtimeMapperList .littleRtOn { - background-image: url('junto24.png'); -} -/* end collaborate */ - -.nodemargin { - padding-top: 120px; -} -.divider { - margin: 20px 50px 20px 50px; - border-bottom: 2px solid #FFF; -} -.empty { - margin-left: 50px; -} -#menus { - margin: 0 7px; -} -/* right click menu */ - -.rightclickmenu { - position: absolute; - background: white; - z-index: 20; - border-radius: 2px; - color: black; -} -.rightclickmenu ul { - padding: 2px; -} -.rightclickmenu ul li { - list-style: none; - padding: 3px 10px 3px 30px; - font-family: arial, sans-serif; - font-size: 17px; - line-height: 17px; - background-repeat: no-repeat; - background-size: 20px 20px; - background-position: 5px 2px; -} -.rightclickmenu ul li:nth-child(odd) { - background-color: #FFF; -} -.rightclickmenu ul li:nth-child(even) { - background-color: #EEE; -} -.rightclickmenu ul li:hover { - background-color: #BBB; - background-position: 7px 2px; - cursor: pointer; -} -.rightclickmenu .rc-delete { - background-image: url(MMCCicon_delete_black.png); -} -.rightclickmenu .rc-remove { - background-image: url(MMCCicon_remove_from_map_black.png); -} -.rightclickmenu .rc-hide { - background-image: url(MMCCicon_hide.png); -} -.rightclickmenu .rc-center { - background-image: url(MMCCicon_center.png); -} -.rightclickmenu .rc-popout { - background-image: url(MMCCicon_pop-out_black.png); -} -.rightclickmenu .rc-permission { - background-image: url(MMCCicon_edit_permission_black.png); - position: relative; -} -.rightclickmenu .rc-metacode { - background-image: url(blank.png); - position: relative; -} -.rc-metacode li img { -float: left; -} -.rightclickmenu .rc-permission ul, .rightclickmenu .rc-metacode ul { - display: none; - background: white; - top: 0; - left: 100%; - position: absolute; - border-bottom-left-radius: 2px; - border-bottom-right-radius: 2px; - border-top-right-radius: 2px; -} -.rightclickmenu .rc-permission:hover ul, .rightclickmenu .rc-metacode:hover ul { - display: block; -} -.rightclickmenu .rc-permission .toCommons { - background-image: url(MMCCicon_commons.png); -} -.rightclickmenu .rc-permission .toPublic { - background-image: url(MMCCicon_public.png); -} -.rightclickmenu .rc-permission .toPrivate { - background-image: url(MMCCicon_private.png); -} -.rightclickmenu p { - padding: 7px; -} -/* end right click menu */ - -/* topic autocomplete */ - -#new_topic .tt-suggestion.tt-is-under-cursor, -#new_topic .tt-suggestion.tt-is-under-mouse-cursor { - background: #0E161D; -} -#new_topic .tt-suggestion { - padding: 5px; - font-family: 'LatoLight'; - background: rgba(42, 52, 60, 0.9); - ; -} -#new_topic .autocompleteSection { - float: left; -} -#new_topic .topicTitle { - width: 130px; - line-height: 22px; -} -#new_topic .topicPermission { - width: 20px; - height: 20px; - background-repeat: no-repeat; - background-position: center center; - background-size: 16px 16px; -} -#new_topic .topicPermission.commons { - background-image: url(MMCCicon_commons.png); -} -#new_topic .topicPermission.public { - background-image: url(MMCCicon_public.png); -} -#new_topic .topicPermission.private { - background-image: url(MMCCicon_private.png); -} -#new_topic .topicOriginatorIcon { - position: relative; - width: 20px; - height: 20px; - background-repeat: no-repeat; - background-position: center center; - background-size: 16px 16px; - background-image: url(MMCCicon_mapper.png); -} -#new_topic .topicOriginatorIcon:hover .tip { - display: block; -} -#new_topic .tip { - display: none; - position: absolute; - background: white; - width: auto; - top: 0; - left: 23px; - color: black; - white-space: nowrap; - border-radius: 4px; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 15px; - padding: 2px 5px 2px; - z-index: 100; -} -/* synapse autocomplete */ - -#new_synapse .tt-dropdown-menu { - width: 212px; - background: #2A343C; -} -#new_synapse .tt-dropdown-menu h3 { - font-family: 'vinyl', helvetica, sans-serif; - text-transform: uppercase; - font-style: italic; - font-size: 14pxpx; - line-height: 16px; - margin: 3px; -} -#new_synapse .tt-suggestion.tt-is-under-cursor, -#new_synapse .tt-suggestion.tt-is-under-mouse-cursor { - background: #0E161D; -} -#new_synapse .tt-suggestion { - padding: 5px; - font-family: 'LatoLight'; -} -#new_synapse .autocompleteSection { - float: left; -} -#new_synapse .synapseDesc { - width: 162px; - line-height: 22px; -} -#new_synapse .synapsePermission { - width: 20px; - height: 20px; - background-repeat: no-repeat; - background-position: center center; - background-size: 16px 16px; -} -#new_synapse .synapsePermission.commons { - background-image: url(MMCCicon_commons.png); -} -#new_synapse .synapsePermission.public { - background-image: url(MMCCicon_public.png); -} -#new_synapse .synapsePermission.private { - background-image: url(MMCCicon_private.png); -} -#new_synapse .synapseOriginatorIcon { - position: relative; - width: 20px; - height: 20px; - background-repeat: no-repeat; - background-position: center center; - background-size: 16px 16px; - background-image: url(MMCCicon_mapper.png); -} -#new_synapse .synapseOriginatorIcon:hover .tip { - display: block; -} -#new_synapse .tip { - display: none; - position: absolute; - background: white; - width: auto; - top: 0; - left: 23px; - color: black; - white-space: nowrap; - border-radius: 4px; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 15px; - padding: 2px 5px 2px; - z-index: 100; -} -#new_synapse .tt-suggestion .resultnoresult .synapsePermission, -#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon { - display: none; -} -/* map info box */ - -.wrapper div.mapInfoBox { - display: none; - position: absolute; - bottom: 40px; - right: 3px; - background-color: #424242; - color: #F5F5F5; - border-radius: 2px; - width: 360px; - height: 300px; - padding: 0; - font-style: normal; - text-align: center; - box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16); -} -.mapInfoName { - font-size: 18px; - line-height: 20px; - height: 20px; - padding: 26px 0; -} -.mapInfoStat { - background-color: #E0E0E0; - font-size: 18px; - line-height: 20px; - height: 48px; - padding: 0; - color: #424242; -} -.wrapper div.mapInfoName span, -.wrapper div.mapInfoDesc span { - float: none !important; - padding-bottom: 10px; -} -.infoStatIcon { - float: left; - width: 25px; - padding: 14px 0px 14px 45px; - height: 20px; - background-repeat: no-repeat; - text-align: left; -} -.mapContributors { - background-image: url(MMCCicon_mapper.png); - background-position: 13px center; - position: relative; -} -.infoStatIcon .tip { - display: none; - position: absolute; - background: white; - min-width: 180px; - max-width: 250px; - text-align: center; - color: black; - border-radius: 4px; - font-size: 15px !important; - line-height: 17px; - padding: 3px 5px 2px; - z-index: 100; -} -.mapContributors .tip { - top: 38px; - left: 6px; -} -.mapInfoBox .mapPermission .tip { - top: 0; - right: 32px; -} -.mapInfoBox .hoverForTip:hover .tip { - display: block; -} -.mapTopics { - background-image: url(topic32.png); - background-position: 13px center; -} -.mapSynapses { - background-image: url(synapse32tmcard.png); - background-position: 13px center; -} -.mapInfoBox .mapPermission { - background-position: 0 center; - width: 32px; - height: 32px; - padding: 0; - margin: 8px 30px 8px 10px; - position: relative; -} -.mapInfoBox .mapPermission.commons { - background-image: url(CO32.png); -} -.mapInfoBox .mapPermission.public { - background-image: url(PU32.png); -} -.mapInfoBox .mapPermission.private { - background-image: url(PR32.png); -} -.yourMap .mapPermission:hover { - background-image: url(arrowexpand.png); - cursor: pointer; -} -.yourMap .mapPermission.minimize { - background-image: url(arrowcollapse.png) !important; - cursor: pointer; -} -.mapInfoBox .mapPermission .permissionSelect { - list-style: none; - width: 32px; - height: 64px; - position: relative; - top: 32px; -} -.mapInfoBox .mapPermission .permissionSelect li { - width: 32px; - height: 32px; - background-repeat: no-repeat; - background-position: center center; -} -.mapInfoBox .mapPermission .permissionSelect .commons { - background-image: url(CO32.png); -} -.mapInfoBox .mapPermission .permissionSelect .public { - background-image: url(PU32.png); -} -.mapInfoBox .mapPermission .permissionSelect .private { - background-image: url(PR32.png); -} -.mapInfoBox .mapPermission .permissionSelect .commons:hover { - background-image: url(CO32b.png); -} -.mapInfoBox .mapPermission .permissionSelect .public:hover { - background-image: url(PU32b.png); -} -.mapInfoBox .mapPermission .permissionSelect .private:hover { - background-image: url(PR32b).png); -} -.mapInfoBox .mapInfoDesc { - font-family: helvetica, sans-serif; - color: #E0E0E0; - margin: 8px; - height: 106px; - font-size: 14px; - line-height: 16px; -} -.mapInfoBox .mapInfoMeta { - height: 35px; - border-top: 1px solid #F5F5F5; - padding: 6px 0 7px; -} -.mapInfoBox .mapInfoMeta p { - margin: 4px 0; - font-size: 12px; - color: #F5F5F5; -} -/* lightboxes */ - -#lightbox_overlay { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: fixed; - z-index: 1000000; - display: none; -} -#lightbox_main { - width: 550px; - height: auto; - margin: 0 auto; - z-index: 2; - position: relative; - top: 50%; - background-color: transparent; - color: black; -} -#lightbox_screen { - top: 0; - left: 0; - z-index: 1; - width: 100%; - position: absolute; - background-color: #000; - opacity: 0.0; - filter: alpha(opacity=0); - -moz-opacity: 0.0; -} -#lightbox_overlay #lightbox_main #lightbox_header { - padding: 6px 5px 1px 0; - background-color: #333; - font-weight: bold; - height: 18px; - border: solid 2px #000; -} -#lightbox_overlay #lightbox_main a#lightbox_close { - /*background-image: url(../images/barometer_close.png);*/ - cursor: pointer; - height: 42px; - outline-color: -moz-use-text-color; - outline-style: none; - outline-width: medium; - overflow: hidden; - position: absolute; - top: -23px; - right: -22px; - width: 42px; - z-index: 4; - border: none; -} -#lightbox_content { - background: white url(metacode-watermark.png) 443px -30px no-repeat; - padding: 20px; - border-radius: 5px; -} -.lightboxContent h3 { - font-style: italic; - text-transform: uppercase; - font-family: 'vinyl'; - font-size: 30px; - line-height: 35px; - color: black; -} -.lightboxContent h3.forCreateMap { - text-align: center; -} -.lightboxContent { - display: none; -} -.openLightbox { - cursor: pointer; -} -/* jquery ui tabs */ - -.ui-tabs-hide { - display: none !important; -} -.ui-tabs-vertical { - width: 55em; -} -.ui-tabs-vertical .ui-tabs-nav { - float: left; - width: 100px; - background: none; - border: none; - font-size: 15px; - padding: 0 !important; -} -.ui-tabs-vertical .ui-tabs-nav li { - clear: left; - width: 100%; - border-top: none !important; - border-left: none !important; - border-bottom: none !important; - background: none !important; - margin: 0 0 .2em 0 !important; - white-space: normal !important; -} -.ui-tabs-vertical .ui-tabs-nav li.ui-state-active, -.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { - border-right: 1px solid #000; -} -.ui-tabs-vertical .ui-tabs-nav li a { - display: block; - width: 92%; - padding: 4% !important; -} -.ui-tabs-vertical .ui-tabs-panel { - padding: 5px !important; - float: right; - width: 388px; -} -/* switch metacode set */ - -#metacodeSwitchTabs { - width: 100%; - font-family: LatoLight, Arial, Sans-Serif; - font-size: 17px; - line-height: 21px; - border: none; -} -#metacodeSwitchTabs .setTitle { - font-family: Lato, Arial, sans-serif; -} -#metacodeSwitchTabs .setDesc { - margin-bottom: 5px; -} -.customMetacodeList, -.metacodeSetList { - height: 301px; - overflow: hidden; - margin: 5px 0 15px 0; - border-bottom: 1px solid #BBB; -} -.customMetacodeList ul li { - cursor: pointer; -} -.customMetacodeList ul li, -.metacodeSetList ul li { - list-style-type: none; - display: block; - padding: 0px; - width: 92px; - height: 70px; - float: left; - text-align: center; -} -.customMetacodeList li.toggledOff { - opacity: 0.4; -} -.customMetacodeList ul img, -.metacodeSetList ul img { - width: 40px; - height: 40px; - margin: 0 auto; -} -.customMetacodeList ul p, -.metacodeSetList ul p { - display: block; - margin: 0; - background: none; - font-size: 14px; - line-height: 14px; - font-family: Lato; -} -#metacodeSwitchTabs button.button { - width: auto !important; - padding: 0 10px; - font-weight: normal; -} -/* about */ - -#about > p { - color: #000; - font-size: 16px; - line-height: 24px; - margin: 10px 0; -} -#about ul { - list-style: none; -} -#about ul li { - display: inline-block; - padding: 5px; -} -#about li a { - color: #097A51; -} -/* invite */ - -#invite { - color: black; -} -#invite p { - margin: 10px 0; - line-height: 24px; -} -#invite .green { - text-align: center; - display: block; - color: #097A51; -} -/* new map */ - -.new_map { - color: black; -} -.new_map .inputGroup { - margin: 15px 0 5px; -} -.new_map label { - float: left; - width: 100px; - text-align: right; - margin-right: 15px; -} -.new_map input[type="text"] { - width: 336px; - height: 32px; - font-size: 15px; - direction: ltr; - -webkit-appearance: none; - appearance: none; - display: inline-block; - margin: 0; - padding: 0 8px; - background: #fff; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - font: -webkit-small-control; - color: initial; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - display: inline-block; - text-align: start; - font-family: arial; -} -.new_map input[type="text"]:hover, -.new_map textarea:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -.new_map textarea { - padding: 8px; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - resize: none; - font: -webkit-small-control; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - text-align: start; - font-family: arial; - font-size: 15px; - line-height: 17px; - width: 318px; -} -.new_map .permIcon { - float: left; - width: 92px; - height: 85px; - position: relative; -} -.new_map .mapPermIcon { - width: 60px; - height: 60px; - background-size: 48px 48px; - background-position: center center; - background-repeat: no-repeat; - margin: 0 auto; - cursor: pointer; -} -.new_map .mapCommonsIcon { - background-image: url(MMCCicon_commons.png); -} -.new_map .mapPublicIcon { - background-image: url(MMCCicon_public.png); -} -.new_map .mapPrivateIcon { - background-image: url(MMCCicon_private.png); -} -.new_map .mapCommonsIcon.selected, -.new_map .mapCommonsIcon:hover { - background-image: url(MMCCicon_commons_black.png); -} -.new_map .mapPublicIcon.selected, -.new_map .mapPublicIcon:hover { - background-image: url(MMCCicon_public_black.png); -} -.new_map .mapPrivateIcon.selected, -.new_map .mapPrivateIcon:hover { - background-image: url(MMCCicon_private_black.png); -} -.new_map .permIcon h4 { - font-style: italic; - font-family: 'Vinyl'; - text-transform: uppercase; - font-size: 18px; - line-height: 20px; - color: black; - text-align: center; -} -.new_map .tip { - display: none; - position: absolute; - background: black; - width: 150px; - top: 85px; - left: -29px; - color: white; - border-radius: 4px; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 17px; - padding: 3px 5px 2px; - z-index: 100; - text-align: center; -} -.new_map .hoverForTip:hover .tip { - display: block; -} -.permText { - width: 360px; - margin: 0 auto; - text-align: center; -} -.buttonWrapper { - margin: 10px 0 0 131px; - width: 254px; -} -.onConsole .new_map button.cancel { - margin-right: 20px; -} -.onConsole .new_map button, -.onConsole .new_map input.add { - float: left; - margin-top: 5px; - height: 40px; - font-family: 'LatoItalic'; - font-size: 17px; - width: auto; - padding: 0 30px; - cursor: pointer; - font-weight: normal; -} -.onConsole .new_map button:hover, -.onConsole .new_map input.add:hover { - -webkit-box-shadow: none; - box-shadow: none; -} -/* Cheatsheet */ - -#cheatSheet { - width: 100%; - height: 350px; - font-family: LatoLight, Arial, Sans-Serif; - font-size: 17px; - line-height: 21px; - border: none; -} -#cheatSheet .sectionTitle { - font-family: Lato, Arial, sans-serif; - font-weight: bold; -} -#cheatSheet .csItem { - margin: 5px 0; - font-size: 15px; - line-height: 18px; -} -#cheatSheet .csItem img { - display: inline-block; - margin: 0 2px; -} -#cheatSheet .csTitle { - font-family: Lato, Arial, sans-serif; -} -#cheatSheet .indented { - margin-left: 15px; -} -/* Admin Pages */ - -#wrapper > div.blackBox { - width: 700px; - margin: 0 auto; - padding: 20px 0 20px 20px; - background: rgba(0, 0, 0, 0.4); - color: white; - height: 100%; - overflow: hidden; - position: relative; -} -.blackBox .metacodeSetsDescription { - width: 314px; -} -.blackBox td.metacodeSetDesc { - width: 314px; - word-wrap: break-word; -} -.blackBox .metacodeSetImage { - width: 36px; - height: 36px; - float: left; -} -.blackBox tr { - display: table-row; -} -.blackBox tr:nth-child(odd) { - background: rgba(0, 0, 0, 0.2); -} -.blackBox tr:nth-child(even) { - background: rgba(0, 0, 0, 0.3); -} -.blackBox th, -.blackBox td { - padding: 10px; -} -.blackBox td.iconURL { - max-width: 415px; - word-wrap: break-word; -} -.blackBox .field { - margin: 15px 0 5px; -} -.blackBox label { - float: left; - width: 100px; - margin-right: 15px; -} -.blackBox input[type="text"] { - width: 336px; - height: 32px; - font-size: 15px; - direction: ltr; - -webkit-appearance: none; - appearance: none; - display: inline-block; - margin: 0; - padding: 0 8px; - background: #fff; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - font: -webkit-small-control; - color: initial; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - display: inline-block; - text-align: start; - font-family: arial; -} -.blackBox input[type="text"]:hover, -.blackBox textarea:hover { - border: 1px solid #b9b9b9; - border-top: 1px solid #a0a0a0; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -} -.blackBox textarea { - padding: 8px; - border: 1px solid #d9d9d9; - border-top: 1px solid #c0c0c0; - resize: none; - font: -webkit-small-control; - letter-spacing: normal; - word-spacing: normal; - text-transform: none; - text-indent: 0px; - text-shadow: none; - text-align: start; - font-family: arial; - font-size: 15px; - line-height: 17px; - width: 318px; -} -.blackBox .allMetacodes { - padding: 5px 0; -} -.blackBox a.button { - margin-right: 20px; - line-height: 40px; -} -.blackBox a.button, -.blackBox input.add { - float: left; - margin-top: 5px; - height: 40px; - font-family: 'LatoItalic'; - font-size: 17px; - width: auto; - padding: 0 30px; - cursor: pointer; - font-weight: normal; -} -.blackBox a.button:hover, -.blackBox input.add:hover { - -webkit-box-shadow: none; - box-shadow: none; -} -/* FAQ */ - -#wrapper > div.FAQ { - width: 700px; - margin: 0 auto; - padding: 20px 0 20px 20px; - background: rgba(0, 0, 0, 0.4); - color: white; - height: 100%; - overflow: hidden; - position: relative; -} -.FAQ .question { - display: block; - background: rgba(0, 0, 0, 0.4); - padding: 10px 45px 10px 10px; - font-weight: bold; - margin-bottom: 10px; - margin-right: 20px; - line-height: 24px; - position: relative; - cursor: pointer; -} -.FAQ .answer { - padding: 0 30px; - margin-bottom: 20px; - line-height: 24px; - margin-right: 20px; -} -.FAQ .answer.off { - display: none; -} -.FAQ .switch { - position: absolute; - top: 0; - right: 0; - width: 35px; - height: 44px; - background-repeat: no-repeat; - background-position: center center; - background-image: url('/assets/MMCCicon_maximize_arrow.png'); - background-size: 25px 25px; - cursor: pointer; -} -.FAQ .minimizeAnswer { - background-image: url('/assets/MMCCicon_minimize_arrow.png') !important; -} -/* request */ - -#wrapper .requestInvite { - width: 700px; - margin: 0 auto; - padding: 20px; - background: rgba(0, 0, 0, 0.4); - color: white; - height: 100%; - overflow: hidden; -} -.addMap { - display: block; - width: 32px; - height: 32px; - background: url('newmap.png') no-repeat center center; - background-size: 32px 32px; - cursor: pointer; - border-radius: 2px; - margin-right: 10px; -} - - -.home_bg { - display: block; - height: 100%; -} - - -#edit_synapse label, -#edit_synapse_left, -#edit_synapse_right { - display: inline-block; -} -#edit_synapse label.left { - margin-right: 0.5em; -} -.templates { - display: none; -} diff --git a/app/assets/base-bkup.css b/app/assets/base-bkup.css deleted file mode 100644 index 871a861e..00000000 --- a/app/assets/base-bkup.css +++ /dev/null @@ -1,639 +0,0 @@ -#center-container { - position:relative; - height:100%; - width:100%; - /* background-color:#031924; */ - color:#444; -} - -.showcard { - position:absolute; - display:none; - top:100px; - left:100px; - width:300px; - min-height:360px; - background-color:#F5F5F5; - text-align: left; - overflow: visible; - z-index:14000; - color: #424242; - border-radius:2px; - box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16); -} - -.text { - margin: 7px; -} - -#infovis { - width:100%; - height:100%; -} - -.showcard .permission { - width:100%; - height:100%; -} - -.CardOnGraph { - display:block; - position:relative; - width:100%; - height:100%; - z-index: 25; -} - -.CardOnGraph .title { - font-size: 18px; - line-height: 22px; - display: block; - padding: 8px 16px; - height: 80px; - text-align: center; - font-family: 'din-regular', sans-serif; -} - -.best_in_place_name { - -} - -.best_in_place_name textarea, .best_in_place_name input { - font-family: 'din-regular', sans-serif; - color: #424242; - font-size: 18px; - line-height: 22px; -height: 15px; -padding: 5px 0; -width: 100%; -margin: 0; -border: 0; -outline: none; -background: none; -text-align:center; -} - -.CardOnGraph .scroll { - display:block; - padding: 8px 16px; - height: 152px; - font-size: 12px; - line-height:15px; - font-family: helvetica, sans-serif; -} - -.CardOnGraph .best_in_place_desc textarea { - font-size: 12px; - line-height:15px; - font-family: helvetica, sans-serif; - color: #424242; -padding: 0; -width: 100%; -margin: 0; -border: 0; -outline: none; -font-size: 12px; -line-height: 15px; -background: none; -} - -.CardOnGraph .desc h3 { - font-style:normal; - margin-top:5px; -} - -.CardOnGraph .best_in_place_desc input { - float: right; - margin: 2px 0px 0px 2px; - padding: 1px 5px; -} - -.CardOnGraph .best_in_place_desc { - display:block; - margin-top:2px; -} - -#edit_synapse .best_in_place_desc { - width: auto; -} - -.CardOnGraph .links { - position:relative; - border-bottom: 1px solid #BDBDBD; - border-top: 1px solid #BDBDBD; -} - -.linkItem { - float:left; - min-width:46px; - height:46px; - background-repeat: no-repeat; - background-position: 0 center; - background-size: 24px 24px; - z-index: 1; - position: relative; - color: #424242; - font-size: 12px; - line-height:12px; - height:12px; - padding:17px 0; -} -.linkItem a { - color: #424242; -} - -.CardOnGraph .icon { - position:absolute; - width:100%; - z-index:1; - padding: 0; -} -.linkItem.contributor { - background-image: url(MMCCicon_mapper_black.png); - margin-left:32px; - z-index:1; - padding:17px 0 17px 28px; -} -.linkItem.mapCount { - background-image: url(MMCCicon_map_black.png); - min-width: 16px; - padding:17px 0 17px 28px; -} -.linkItem.synapseCount { - background-image: url(MMCCicon_synapse_black.png); - min-width: 16px; - padding:17px 0 17px 28px; -} -.linkItem.mapPerm { - -} -.linkItem.mapPerm.co { - background-image: url(MMCCicon_commons.png); -} -.linkItem.mapPerm.pu { - background-image: url(MMCCicon_public.png); -} -.linkItem.mapPerm.pr { - background-image: url(MMCCicon_private.png); -} - -.showcard .yourTopic .mapPerm:hover { - background-image: url(/assets/MMCCicon_maximize_arrow_black.png); - background-size: 31px 25px; - background-position-x: 8px; - cursor:pointer; -} -.showcard .yourTopic .mapPerm.minimize { - background-image: url(MMCCicon_minimize_arrow_black.png) !important; - background-size: 31px 25px; -background-position-x: 8px; -cursor: pointer; -} -.mapPerm .permissionSelect { - list-style: none; - width: 40px; - height: 80px; - position: relative; - top: 40px; -} -.mapPerm .permissionSelect li { - width: 40px; - height: 40px; - background-repeat: no-repeat; - background-position: center center; - background-size: 27px 27px; - background-color: #F5F5F5; -} -.mapPerm .permissionSelect .commons { - background-image: url(MMCCicon_commons.png); -} -.mapPerm .permissionSelect .public { - background-image: url(MMCCicon_public.png); -} -.mapPerm .permissionSelect .private { - background-image: url(MMCCicon_private.png); -} -.mapPerm .permissionSelect .commons:hover { - background-image: url(MMCCicon_commons_black.png); -} -.mapPerm .permissionSelect .public:hover { - background-image: url(MMCCicon_public_black.png); -} -.mapPerm .permissionSelect .private:hover { - background-image: url(MMCCicon_private_black.png); -} - -.CardOnGraph .metacodeTitle { - font-style: italic; - font-family: 'vinyl'; - text-transform: uppercase; - position: absolute; - line-height: 24px; - height:24px; - font-size: 20px; - display: none; - width: 90%; - padding: 11px 0 11px 10%; - background-color: #64BC61; - color: #000; -} -.permission.canEdit .metacodeTitle { - cursor:pointer; - background-image: url(MMCCicon_maximize_arrow_black.png); - background-repeat:no-repeat; - background-position: right center; -} -.permission.canEdit .metacodeTitle.minimize { - background-image: url(MMCCicon_minimize_arrow_black.png); -} - -.CardOnGraph .metacodeImage { - cursor:move; - width:46px; - height:46px; - position:absolute; - left:-23px; - top:0; - background-size:46px 46px; - background-position:0 0; - background-repeat:no-repeat; -} - -#metacodeOptions { - display:none; -} -.CardOnGraph .metacodeSelect { - display:none; - width:100%; - z-index: 2; - position: absolute; - background: #EAEAEA; - height: 150px; -} -.CardOnGraph .metacodeSelect ul { -font-style: italic; -font-family: 'vinyl'; -text-transform: uppercase; -position: absolute; -line-height: 36px; -font-size: 20px; -display:block; -width: 100%; -margin:0; -padding: 0; -list-style:none; -height:150px; -overflow:hidden; -} -.CardOnGraph .metacodeSelect ul li { -background-color: #EAEAEA; -width:100%; -border-bottom:1px solid #AAAAAA; -cursor:pointer; -} -.CardOnGraph .metacodeSelect ul li:hover { -background-color: #F8F8F8; -} -.CardOnGraph .metacodeSelect ul li img, .CardOnGraph .metacodeSelect ul li .mSelectName { -float:left; -} - -.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip { - display:block; -} -.CardOnGraph .tip, .mapCard .tip { - display:none; - position: absolute; - background: black; - top: 35px; - left: 0; - color: white; - border-radius: 4px; - font-size:15px !important; - font-family:'LatoRegular'; - line-height:17px; - padding: 3px 5px 2px; - z-index:100; -} - - -.CardOnGraph .attachments { - border-top: 1px solid #BDBDBD; - width:100%; - height:47px; -} - -.attachments a { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - margin-left: 40px; - padding-top:9px; - font-size: 16px; - line-height: 16px; -} - -.addAttachment div { - display: inline-block; - width: 150px; - height: 23px; - text-align: center; - padding-top: 25px; - font-size: 12px; - color: #9e9e9e; - cursor: pointer; -} - -.addAttachment div:hover { - color: #616161; -} - -.addLink div { - float: left; -} - -#addLinkBack { - height: 48px; - width: 48px; - cursor: pointer; -} -#addLinkInput { - height: 32px; - width: 236px; - padding: 8px 16px 8px 0; - position: relative; -} - -#addLinkInput input{ -padding: 7px 31px 7px 31px; -height: 16px; -width: 172px; -margin: 0 0 0 0; -border: 1px solid #BDBDBD; -outline: none; -font-size: 16px; -line-height: 16px; -background: white; -color: black; -font-family: 'LatoLight'; -} - -#addLinkReset { - position: absolute; - top: 8px; - right: 16px; - width: 32px; - height: 32px; - cursor: pointer; - float:none; -} - -.cardSettings { - position: absolute; - left: 12px; - top: 12px; -} - -.editSettings { - background: #ddd; - border-radius: 10px; - padding: 5px 0 5px 5px; - position: relative; - left: 16px; - width: 175px; - opacity: 0.98; - box-shadow: 4px 4px 5px #888888; - border: 1px solid #AAA; - z-index: 5; -} - -.editSettings span { - display: inline-block; -} - -.permActivator { - width: 16px; - height: 16px; - background: url('settings.png') no-repeat 0 0; - overflow:hidden; - position: absolute; - left: 0px; - top: 30px; -} - -#edit_synapse .mapPerm, -#edit_synapse .permActivator { - position: static; - display: inline-block; - color: #000; -} - -#edit_synapse .mapPerm { - width: 20px; - height:20px; - background-repeat: no-repeat; - background-size: 20px 20px; - margin: 10px 12px 0 12px; -} -#edit_synapse .mapPerm.co { - background-image: url("/assets/MMCCicon_commons.png"); -} -#edit_synapse .mapPerm.pu { - background-image: url("/assets/MMCCicon_public.png"); -} -#edit_synapse .mapPerm.pr { - background-image: url("/assets/MMCCicon_private.png"); -} - -#edit_synapse .permActivator { - position: absolute; - margin-top: -1.3em; -} - -#edit_synapse { - background: url("/assets/MMCCicon_synapse_black.png") no-repeat scroll 0 center / 30px 30px #FFFFFF; - border-radius: 5px; - padding: 5px 5px 5px 30px; - color: #000; -} - -#edit_synapse_name { - margin-left: 0.4em; - border-bottom: 1px solid black; - text-align:center; - max-width: 160px; -} - -#edgeUser { - display:inline-block; - background-position: center center; - background-repeat: no-repeat; - background-size: 20px 20px; - height: 20px; - min-width: 20px; - position: relative; - background-image: url("MMCCicon_mapper_black.png"); - margin: 10px 0 0 10px; -} -#edgeUser.hoverForTip:hover .tip { - display:block; -} -#edgeUser .tip { - background: none repeat scroll 0 0 #000000; - border-radius: 4px; - color: #FFFFFF; - display: none; - font-family: 'LatoRegular'; - font-size: 15px !important; - line-height: 17px; - padding: 3px 5px 2px; - position: absolute; - left: 0; - text-align: center; - top: 23px; - z-index: 100; -} - -#edit_synapse .click-to-edit { - margin-left: 0.3em; -} - -#edit_synapse.yourEdge .mapPerm:hover { - background-image: url(/assets/MMCCicon_maximize_arrow_black.png); - background-size: 24px 17px; - background-position: 0px 2px; - cursor:pointer; -} -#edit_synapse.yourEdge .mapPerm.minimize { - background-image: url(MMCCicon_minimize_arrow_black.png) !important; - background-size: 24px 17px; - background-position: 0px 2px; - cursor: pointer; -} -#edit_synapse .mapPerm .permissionSelect { - list-style: none; - width: 26px; - height: 52px; - position: relative; - top: 20px; - left:-3px; -} -#edit_synapse .mapPerm .permissionSelect li { - width: 26px; - height: 26px; - background-repeat: no-repeat; - background-position: center center; - background-size: 20px 20px; - background-color:white; -} - - -/* Map Cards */ - -.map { - float:left; - width:220px; - height:340px; - font-size: 12px; - text-align: left; - overflow: visible; - background: #424242; - border-radius:2px; - margin:0 12px 12px 0; -} - -.mapCard { - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ - display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-box-direction: normal; - -moz-box-direction: normal; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; - position:relative; - width:100%; - height:308px; - padding: 16px 0; - color:#F5F5F5; -} - -.mapCard .title { - font-size:18px; - line-height:22px; - display:block; - padding: 0 16px; - text-align: center; - -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ - -moz-box-flex: none; /* OLD - Firefox 19- */ - -webkit-flex: none; /* Chrome */ - -ms-flex: none; /* IE 10 */ - flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - font-family: 'din-regular', sans-serif; -} - -.mapCard .mapScreenshot { - width: 188px; - height: 126px; - padding: 8px 16px; -} -.mapCard .mapScreenshot img { - width: 188px; - height: 126px; -} - -.mapCard .scroll { - display:block; - -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ - -moz-box-flex: 1; /* OLD - Firefox 19- */ - -webkit-flex: 1; /* Chrome */ - -ms-flex: 1; /* IE 10 */ - flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ - overflow-y:auto; - padding:0 16px 8px; - font-family: helvetica, sans-serif; - font-style: italic; - font-size: 12px; -} -.mCS_no_scrollbar { - padding-right: 5px; -} - -.mapCard .mapMetadata { - font-family: 'din-regular', sans-serif; - font-size: 12px; - position:relative; - border-top: 1px solid #BDBDBD; - -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ - -moz-box-flex: none; /* OLD - Firefox 19- */ - -webkit-flex: none; /* Chrome */ - -ms-flex: none; /* IE 10 */ - flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -} - -.mapCard .metadataSection { - padding: 8px 16px 0 16px; - width: 78px; - float: left; -} - -.mapPermission { - font-family: 'din-medium', sans-serif; -} -.cCountColor { - font-family: 'din-medium', sans-serif; - color: #DB5D5D; -} -.tCountColor { - font-family: 'din-medium', sans-serif; - color: #4FC059; -} -.sCountColor { - font-family: 'din-medium', sans-serif; - color: #DAB539; -} \ No newline at end of file diff --git a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js index 5f03e7b7..a5e60934 100644 --- a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js @@ -211,6 +211,9 @@ Metamaps.GlobalUI.CreateMap = { self.newMap.set('permission', $(this).attr('data-permission')); $(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected'); $(this).find('.mapPermIcon').addClass('selected'); + + var permText = $(this).find('.tip').html(); + $(this).parents('.new_map').find('.permText').html(permText); }, submit: function (event) { event.preventDefault(); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7a16d999..1fa43cb5 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -882,15 +882,6 @@ float: left; .rightclickmenu .rc-permission:hover ul, .rightclickmenu .rc-metacode:hover ul { display: block; } -.rightclickmenu .rc-permission .toCommons { - background-image: url(CO64.png); -} -.rightclickmenu .rc-permission .toPublic { - background-image: url(PU64.png); -} -.rightclickmenu .rc-permission .toPrivate { - background-image: url(PR64.png); -} .rightclickmenu p { padding: 7px; } @@ -922,15 +913,6 @@ float: left; background-position: center center; background-size: 16px 16px; } -#new_topic .topicPermission.commons { - background-image: url(CO64.png); -} -#new_topic .topicPermission.public { - background-image: url(PU64.png); -} -#new_topic .topicPermission.private { - background-image: url(PR64.png); -} #new_topic .topicOriginatorIcon { position: relative; width: 20px; @@ -995,15 +977,6 @@ float: left; background-position: center center; background-size: 16px 16px; } -#new_synapse .synapsePermission.commons { - background-image: url(CO64.png); -} -#new_synapse .synapsePermission.public { - background-image: url(PU64.png); -} -#new_synapse .synapsePermission.private { - background-image: url(PR64.png); -} #new_synapse .synapseOriginatorIcon { position: relative; width: 20px; @@ -1127,15 +1100,6 @@ float: left; margin: 8px 30px 8px 10px; position: relative; } -.mapInfoBox .mapPermission.commons { - background-image: url(CO32.png); -} -.mapInfoBox .mapPermission.public { - background-image: url(PU32.png); -} -.mapInfoBox .mapPermission.private { - background-image: url(PR32.png); -} .yourMap .mapPermission:hover { background-image: url(arrowexpand.png); cursor: pointer; @@ -1157,24 +1121,6 @@ float: left; background-repeat: no-repeat; background-position: center center; } -.mapInfoBox .mapPermission .permissionSelect .commons { - background-image: url(CO32.png); -} -.mapInfoBox .mapPermission .permissionSelect .public { - background-image: url(PU32.png); -} -.mapInfoBox .mapPermission .permissionSelect .private { - background-image: url(PR32.png); -} -.mapInfoBox .mapPermission .permissionSelect .commons:hover { - background-image: url(CO32b.png); -} -.mapInfoBox .mapPermission .permissionSelect .public:hover { - background-image: url(PU32b.png); -} -.mapInfoBox .mapPermission .permissionSelect .private:hover { - background-image: url(PR32b.png); -} .mapInfoBox .mapInfoDesc { font-family: helvetica, sans-serif; color: #E0E0E0; @@ -1273,7 +1219,7 @@ float: left; padding: 0 0 0 0; } .lightboxContent h3.forCreateMap { - text-align: center; + text-align: left; } #svi { padding-top: 56px; @@ -1357,6 +1303,28 @@ float: left; background-position-x: -128px; } + +.permIcon .mapCrePermIcon { + background-image: url(permissions64sprite.png); + background-repeat: no-repeat; + width:64px; + height:64px; + margin:10px auto; + background-position: 0 0; +} +.mapCrePermIcon:hover { + background-position-y: -64px; +} +#map_CO { + background-position-x: 0; +} +#map_PU { + background-position-x: -64px; +} +#map_PR { + background-position-x: -128px; +} + /* jquery ui tabs */ .ui-tabs-hide { @@ -1490,17 +1458,22 @@ float: left; } .new_map .inputGroup { margin: 15px 0 5px; + position: relative; } .new_map label { float: left; width: 100px; - text-align: right; + text-align: left; margin-right: 15px; + font-size: 18px; + color: #424242; + font-family: 'din-regular', helvetica, sans-serif; } .new_map input[type="text"] { - width: 336px; + font-family: 'din-medium', helvetica, sans-serif; + width: 400px; height: 32px; - font-size: 15px; + font-size: 14px; direction: ltr; -webkit-appearance: none; appearance: none; @@ -1515,9 +1488,8 @@ float: left; box-sizing: border-box; -webkit-border-radius: 1px; -moz-border-radius: 1px; - border-radius: 1px; - font: -webkit-small-control; - color: initial; + border-radius: 2px; + color: #424242; letter-spacing: normal; word-spacing: normal; text-transform: none; @@ -1525,7 +1497,7 @@ float: left; text-shadow: none; display: inline-block; text-align: start; - font-family: arial; + float: right; } .new_map input[type="text"]:hover, .new_map textarea:hover { @@ -1536,94 +1508,100 @@ float: left; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } .new_map textarea { + color: #424242; padding: 8px; border: 1px solid #d9d9d9; border-top: 1px solid #c0c0c0; resize: none; - font: -webkit-small-control; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; text-align: start; - font-family: arial; - font-size: 15px; + font-family: 'din-medium', helvetica, sans-serif; + font-size: 14px; line-height: 17px; - width: 318px; + width: 400px; + box-sizing: border-box; + float: right; + border-radius: 2px; +} + +.permHelper { + position: absolute; + width: 128px; + top: 36px; + color: #424242; + font-family: 'din-regular', helvetica, sans-serif; + font-size: 12px; +} + +.permIconWrapper { + width: 276px; + padding: 0 62px; + float: right; } .new_map .permIcon { float: left; width: 92px; - height: 85px; + height: 102px; position: relative; } .new_map .mapPermIcon { - width: 60px; + background-image: url(permissions64sprite.png); + background-repeat: no-repeat; + width:64px; + height:64px; + margin:10px auto 0; + background-position: 0 0; +/* width: 60px; height: 60px; background-size: 48px 48px; background-position: center center; background-repeat: no-repeat; margin: 0 auto; - cursor: pointer; + cursor: pointer;*/ } -.new_map .mapCommonsIcon { - background-image: url(CO64.png); +.mapPermIcon:hover, .mapPermIcon.selected { + background-position-y: -64px; } -.new_map .mapPublicIcon { - background-image: url(PU64.png); +#newmap_co { + background-position-x: 0; } -.new_map .mapPrivateIcon { - background-image: url(PR64.png); +#newmap_pu { + background-position-x: -64px; } -.new_map .mapCommonsIcon.selected, -.new_map .mapCommonsIcon:hover { - background-image: url(CO64b.png); -} -.new_map .mapPublicIcon.selected, -.new_map .mapPublicIcon:hover { - background-image: url(PU64b.png); -} -.new_map .mapPrivateIcon.selected, -.new_map .mapPrivateIcon:hover { - background-image: url(PR64b.png); +#newmap_pr { + background-position-x: -128px; } + + .new_map .permIcon h4 { font-style: italic; font-family: 'Vinyl'; text-transform: uppercase; font-size: 18px; line-height: 20px; - color: black; + color: #424242 ; text-align: center; } .new_map .tip { display: none; - position: absolute; - background: black; - width: 150px; - top: 85px; - left: -29px; - color: white; - border-radius: 4px; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 17px; - padding: 3px 5px 2px; - z-index: 100; - text-align: center; -} -.new_map .hoverForTip:hover .tip { - display: block; } .permText { width: 360px; - margin: 0 auto; + margin: 16px 20px 0; text-align: center; + float: right; + color: #424242; + font-family: 'din-regular', helvetica, sans-serif; + font-size: 14px; } .buttonWrapper { - margin: 10px 0 0 131px; - width: 254px; + width: 274px; + float:right; + margin: 16px 0 0 0; } .onConsole .new_map button.cancel { margin-right: 20px; @@ -1633,7 +1611,6 @@ float: left; float: left; margin-top: 5px; height: 40px; - font-family: 'LatoItalic'; font-size: 17px; width: auto; padding: 0 30px; diff --git a/app/views/layouts/_newmap.html.erb b/app/views/layouts/_newmap.html.erb index 6d72ec20..91c8b4f1 100644 --- a/app/views/layouts/_newmap.html.erb +++ b/app/views/layouts/_newmap.html.erb @@ -4,7 +4,7 @@ #%>
<%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "new_map" } do |form|%> -

Create A New Map

+

Create New Map

@@ -19,43 +19,43 @@
- - -
-
-
- Collaborate with other mappers on editing this map. Those without accounts can view this map. + +

*new topics and synapses take on the same permission as the map they are created on

+
+
+
+
+ Collaborate with other mappers on editing this map. Those without accounts can view this map. +
+
+

COMMONS

-
-

COMMONS

-
-
-
-
- Anyone, with or without an account, can view this map but not edit anything. +
+
+
+ Anyone, with or without an account, can view this map but not edit anything. +
+
+

PUBLIC

-
-

PUBLIC

-
-
-
-
- Only you can view or edit this map. +
+
+
+ Only you can view or edit this map. +
+
+

PRIVATE

-
-

PRIVATE

+
- +

Collaborate with other mappers on editing this map. Those without accounts can view this map.

-
- -

*new topics and synapses take on the same permission as the map they are created on

+
-
<% end %>
diff --git a/app/views/shared/_forkmap.html.erb b/app/views/shared/_forkmap.html.erb index 3b3b4d7f..e63c098e 100644 --- a/app/views/shared/_forkmap.html.erb +++ b/app/views/shared/_forkmap.html.erb @@ -18,43 +18,44 @@
- + <%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %>
- - -
-
-
- Collaborate with other mappers on editing this map. Those without accounts can view this map. + +

*new topics and synapses take on the same permission as the map they are created on

+
+
+
+
+ Collaborate with other mappers on editing this map. Those without accounts can view this map. +
+
+

COMMONS

-
-

COMMONS

-
-
-
-
- Anyone, with or without an account, can view this map but not edit anything. +
+
+
+ Anyone, with or without an account, can view this map but not edit anything. +
+
+

PUBLIC

-
-

PUBLIC

-
-
-
-
- Only you can view or edit this map. +
+
+
+ Only you can view or edit this map. +
+
+

PRIVATE

-
-

PRIVATE

+
- +

Collaborate with other mappers on editing this map. Those without accounts can view this map.

-
- -

*new topics and synapses take on the same permission as the map they are created on

+