styled faq page
This commit is contained in:
Connor Turland
parent
ab40ddfdf4
commit
17fe5fa241
BIN
app/assets/images/mushroom.jpg
Normal file
BIN
app/assets/images/mushroom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
|
|
@ -63,6 +63,10 @@ body {
|
|||
background-attachment:fixed;
|
||||
color:#FFF;
|
||||
}
|
||||
body.bodyFAQ {
|
||||
background: #031924 url(mushroom.jpg) no-repeat center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-weight:normal;
|
||||
|
|
@ -184,8 +188,7 @@ box-shadow: 0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);
|
|||
}
|
||||
|
||||
.new_session,
|
||||
.new_user,
|
||||
.invite {
|
||||
.new_user {
|
||||
display: block;
|
||||
width: 350px;
|
||||
position:absolute;
|
||||
|
|
@ -214,14 +217,6 @@ box-shadow: 0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);
|
|||
border:2px solid #000;
|
||||
}
|
||||
|
||||
.invite p {
|
||||
margin:10px 0;
|
||||
}
|
||||
.invite strong {
|
||||
text-align:center;
|
||||
display:block;
|
||||
color:#67AF9F;
|
||||
}
|
||||
|
||||
#closenewtopic,
|
||||
#closenewsynapse {
|
||||
|
|
@ -575,6 +570,11 @@ li.accountIcon a {
|
|||
padding: 6px 0 6px 25px;
|
||||
}
|
||||
|
||||
li.accountInvite span {
|
||||
display: block;
|
||||
padding: 6px 0 6px 25px;
|
||||
}
|
||||
|
||||
.sidebarAccountBox a {
|
||||
color:white;
|
||||
}
|
||||
|
|
@ -1574,6 +1574,22 @@ border: solid 2px #000;
|
|||
color:#097A51;
|
||||
}
|
||||
|
||||
/* invite */
|
||||
|
||||
#invite {
|
||||
color:black;
|
||||
}
|
||||
|
||||
#invite p {
|
||||
margin:10px 0;
|
||||
}
|
||||
|
||||
#invite .green {
|
||||
text-align:center;
|
||||
display:block;
|
||||
color:#097A51;
|
||||
}
|
||||
|
||||
/* new map */
|
||||
.new_map {
|
||||
color:black;
|
||||
|
|
@ -1643,6 +1659,7 @@ font-family:arial;
|
|||
font-family:arial;
|
||||
font-size:15px;
|
||||
line-height:17px;
|
||||
width:318px;
|
||||
}
|
||||
|
||||
.new_map .permIcon {
|
||||
|
|
@ -1736,6 +1753,61 @@ font-family:arial;
|
|||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* FAQ */
|
||||
|
||||
#wrapper > div.FAQ {
|
||||
width: 530px;
|
||||
margin: -275px auto 0;
|
||||
padding: 20px 0 20px 20px;
|
||||
background: rgba(0,0,0,0.4);
|
||||
color: white;
|
||||
height: 510px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
left: 130px;
|
||||
top: 50%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* --- styling the logo button ---*/
|
||||
/*.footer {
|
||||
width: 188px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<ul>
|
||||
<li class="accountIcon accountMaps"><a href="/maps/mappers/<%= account.id %>">My Maps</a></li>
|
||||
<li class="accountIcon accountSettings"><%= link_to "Settings", edit_user_url(account) %></li>
|
||||
<li class="accountIcon accountInvite"><%= link_to "Share Invite", invite_path %></li>
|
||||
<li class="accountIcon accountInvite openLightbox" data-open="invite"><span>Share Invite</span></li>
|
||||
<li class="accountIcon accountLogout"><%= link_to "Logout", "/sign_out", id: "Logout" %></li>
|
||||
</ul>
|
||||
<% else %>
|
||||
|
|
|
|||
|
|
@ -65,6 +65,16 @@
|
|||
</div>
|
||||
|
||||
<% if authenticated? %>
|
||||
<div class="lightboxContent" id="invite">
|
||||
<h3>Send Invites</h3>
|
||||
<p>You can invite others to the Metamaps platform.<br> Just send them the link to</p>
|
||||
<p class="green">http://metamaps.cc/users/sign_up</p>
|
||||
<p>and give them the access code shown below.</p>
|
||||
<% mapper = current_user %>
|
||||
<p class="green"><%= mapper.code %></p>
|
||||
<p>We invite you to be conscious as to who you invite to this platform, because much of the collaborative editing is based on trust. We want to cultivate a community here that is fun, wise, creative, and flourishing. Can you help us build a community like that?</p>
|
||||
</div>
|
||||
|
||||
<% # this is the create new map form %>
|
||||
<div class="lightboxContent" id="newmap">
|
||||
<%= render :partial => 'maps/new' %>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
<%= csrf_meta_tags %>
|
||||
</head>
|
||||
<body>
|
||||
<body class="<%= action_name == "faq" ? "bodyFAQ" : "" %>" >
|
||||
|
||||
<% if notice %>
|
||||
<p class="notice metamaps"><%= notice %></p>
|
||||
|
|
|
|||
|
|
@ -12,43 +12,60 @@
|
|||
|
||||
<div class="FAQ">
|
||||
|
||||
<p class="question">Who may use Metamaps.cc?</p>
|
||||
<div class="question">Who may use Metamaps.cc? <div class="switch minimizeAnswer"></div></div>
|
||||
<p class="answer">You! We are currently in "beta" mode, meaning that the application is undergoing continuous testing and refinement. However, we welcome participants in this trial process with the understanding that things are evolving, and may hold a few surprises! Request an invite if you'd like to explore and build with us. Feedback is always welcome.</p>
|
||||
|
||||
<p class="question">What does it take to learn to Metamap?</p>
|
||||
<p class="answer">While the interface may not seem familiar at first, we've designed it to be both intuitive and empowering after a bit of practice. There are only a handful of basic functions, like adding topics and drawing "synapse" connections, that are needed get your creative process started. A handy cheat sheet is available on the canvas for reference while mapping, and we have an online manual and tutorials to grasp more advanced functionality. The best way to learn is to start mapping, and to connect with other mappers in our online community.</p>
|
||||
<div class="question">What does it take to learn to Metamap? <div class="switch"></div></div>
|
||||
<p class="answer off">While the interface may not seem familiar at first, we've designed it to be both intuitive and empowering after a bit of practice. There are only a handful of basic functions, like adding topics and drawing "synapse" connections, that are needed get your creative process started. A handy cheat sheet is available on the canvas for reference while mapping, and we have an online manual and tutorials to grasp more advanced functionality. The best way to learn is to start mapping, and to connect with other mappers in our online community.</p>
|
||||
|
||||
<p class="question">What is the platform being used for currently?</p>
|
||||
<p class="answer">At a basic level, metamaps are great for laying out complex ideas and scenarios. We're seeing maps of design work, topical research, project management, and narrative storylines. Some users have been capturing live workshop event documentation, or organizing study groups. We're using it ourselves to organize collaboration and develop strategies for the project. Check out our Featured Maps! We'd love to see what else you can come up with.</p>
|
||||
<div class="question">What is the platform being used for currently? <div class="switch"></div></div>
|
||||
<p class="answer off">At a basic level, metamaps are great for laying out complex ideas and scenarios. We're seeing maps of design work, topical research, project management, and narrative storylines. Some users have been capturing live workshop event documentation, or organizing study groups. We're using it ourselves to organize collaboration and develop strategies for the project. Check out our Featured Maps! We'd love to see what else you can come up with.</p>
|
||||
|
||||
<p class="question">Who made this up? Why?</p>
|
||||
<p class="answer">The Metamaps.cc project was launched as an emergent collaboration between artist Gavin Keech, architect Ishan Shapiro, and web developer Connor Turland over the years 2010-12, with input and inspiration from many other peers and projects. Its design draws from the fields of computational cognition, collective intelligence, and human-computer interaction. We continue to seek optimal and novel ways to connect people and ideas through visual information. </p>
|
||||
<div class="question">Who made this up? Why? <div class="switch"></div></div>
|
||||
<p class="answer off">The Metamaps.cc project was launched as an emergent collaboration between artist Gavin Keech, architect Ishan Shapiro, and web developer Connor Turland over the years 2010-12, with input and inspiration from many other peers and projects. Its design draws from the fields of computational cognition, collective intelligence, and human-computer interaction. We continue to seek optimal and novel ways to connect people and ideas through visual information. </p>
|
||||
|
||||
<p class="question">How is MM different from other "mind mapping" apps?</p>
|
||||
<p class="answer">First and foremost, metamaps bring people together into a shared knowledge environment. Topics and maps "in the commons" invite collaborative editing and shared insight. As new content and connections are made throughout the system, all users benefit from collective intelligence. Other distinguishing factors on the platform include a flexible visual categorization system via metacode icons, no built-in structural biases, and a powerful search tool to find content.</p>
|
||||
<div class="question">How is MM different from other "mind mapping" apps? <div class="switch"></div></div>
|
||||
<p class="answer off">First and foremost, metamaps bring people together into a shared knowledge environment. Topics and maps "in the commons" invite collaborative editing and shared insight. As new content and connections are made throughout the system, all users benefit from collective intelligence. Other distinguishing factors on the platform include a flexible visual categorization system via metacode icons, no built-in structural biases, and a powerful search tool to find content.</p>
|
||||
|
||||
<p class="question">Is this an open source project?</p>
|
||||
<p class="answer">One of the core principles of our work is the enhancement of the pool of commons resources such as open source technology and shared knowledge. Our basic application framework is licensed as GPL open source on Github for anyone to build on, and this public platform is freely accessible online. Custom features and implementations may be added on to this framework under more restrictive licenses by the development team for partners and clients.</p>
|
||||
<div class="question">Is this an open source project? <div class="switch"></div></div>
|
||||
<p class="answer off">One of the core principles of our work is the enhancement of the pool of commons resources such as open source technology and shared knowledge. Our basic application framework is licensed as GPL open source on Github for anyone to build on, and this public platform is freely accessible online. Custom features and implementations may be added on to this framework under more restrictive licenses by the development team for partners and clients.</p>
|
||||
|
||||
<p class="question">How can I find out more about the project?</p>
|
||||
<p class="answer">Reading here is a great first step. We also suggest browsing our blog, visiting the Google+ community, or getting in touch by submitting feedback through the site. We occasionally host online and in person meetups where you can interact with other mappers and see how people are using the platform. The story continues to unfold, and we'd be glad for you to take part.</p>
|
||||
<div class="question">How can I find out more about the project? <div class="switch"></div></div>
|
||||
<p class="answer off">Reading here is a great first step. We also suggest browsing our blog, visiting the Google+ community, or getting in touch by submitting feedback through the site. We occasionally host online and in person meetups where you can interact with other mappers and see how people are using the platform. The story continues to unfold, and we'd be glad for you to take part.</p>
|
||||
|
||||
<p class="question">How can I participate, or support the project?</p>
|
||||
<p class="answer">We welcome contributions in many forms. One of the easiest and best things you can do is to keep on mapping your ideas into the commons on the platform! If you're a developer interested in advancing the technology, please join on Github. Designers and others with professional skills should get in touch about opportunities for freelance collaboration through our innovative Open Value Network organizational structure for business development opportunities. Financial contributions are greatly appreciated in support of our work, and can be made through ______</p>
|
||||
<div class="question">How can I participate, or support the project? <div class="switch"></div></div>
|
||||
<p class="answer off">We welcome contributions in many forms. One of the easiest and best things you can do is to keep on mapping your ideas into the commons on the platform! If you're a developer interested in advancing the technology, please join on Github. Designers and others with professional skills should get in touch about opportunities for freelance collaboration through our innovative Open Value Network organizational structure for business development opportunities. Financial contributions are greatly appreciated in support of our work, and can be made through ______</p>
|
||||
|
||||
<p class="question">Are you making money from it? Do you plan to?</p>
|
||||
<p class="answer">To date, the Metamaps.cc project has been supported by volunteers and small grants or donations. We intend to establish an open collaborative environment to pursue revenue opportunities in an agile and equitable fashion by configuring products and services based on the open source Metamaps technology. Stay tuned for further info via our blog and social media, or get in touch if you'd like to join the team!</p>
|
||||
<div class="question">Are you making money from it? Do you plan to? <div class="switch"></div></div>
|
||||
<p class="answer off">To date, the Metamaps.cc project has been supported by volunteers and small grants or donations. We intend to establish an open collaborative environment to pursue revenue opportunities in an agile and equitable fashion by configuring products and services based on the open source Metamaps technology. Stay tuned for further info via our blog and social media, or get in touch if you'd like to join the team!</p>
|
||||
|
||||
<p class="question">I'd like to have a new / different feature. Where can I make suggestions and requests?</p>
|
||||
<p class="answer">Thanks for giving it some thought. New features and functions are continually added to the platform as we seek to optimize the experience there for all users. If you find that something is calling out for addition or improvement, send us a note via feedback form or in the online community. The more detail and context you can provide, the better! </p>
|
||||
<div class="question">I'd like to have a new / different feature. Where can I make suggestions and requests? <div class="switch"></div></div>
|
||||
<p class="answer off">Thanks for giving it some thought. New features and functions are continually added to the platform as we seek to optimize the experience there for all users. If you find that something is calling out for addition or improvement, send us a note via feedback form or in the online community. The more detail and context you can provide, the better! </p>
|
||||
|
||||
<p class="question">I made a cool map...want to check it out?</p>
|
||||
<p class="answer">Yes! Send us the link via feedback form or flag us on social media. We're always curious what mappers are able to do with the platform, and we'd love to pass great examples around so that others can see.</p>
|
||||
<div class="question">I made a cool map...want to check it out? <div class="switch"></div></div>
|
||||
<p class="answer off">Yes! Send us the link via feedback form or flag us on social media. We're always curious what mappers are able to do with the platform, and we'd love to pass great examples around so that others can see.</p>
|
||||
|
||||
<p class="question">Someone else changed my cool map (or favorite topic) without asking me...sad face :(</p>
|
||||
<p class="answer">If your map / topic was set to Commons permission for editing, than any other logged-in user on the site will be able to make changes. We consider this a feature, not a bug, which encourages collaborative maps and an evolving collective knowledge garden. You can easily avoid unwanted changes by setting your permissions to Public, which others may still view and copy to another version if they wish. Courtesy, care, and the benefit of the doubt will go a long ways towards maintaining a happy, healthy, and productive communal atmosphere on Metamaps.cc</p>
|
||||
<div class="question">Someone else changed my cool map (or favorite topic) without asking me...sad face :( <div class="switch"></div></div>
|
||||
<p class="answer off">If your map / topic was set to Commons permission for editing, than any other logged-in user on the site will be able to make changes. We consider this a feature, not a bug, which encourages collaborative maps and an evolving collective knowledge garden. You can easily avoid unwanted changes by setting your permissions to Public, which others may still view and copy to another version if they wish. Courtesy, care, and the benefit of the doubt will go a long ways towards maintaining a happy, healthy, and productive communal atmosphere on Metamaps.cc</p>
|
||||
|
||||
<p class="question">How do I "_________" on metamaps?</p>
|
||||
<p class="answer">Link to our cheatsheet stuff...and manual.</p>
|
||||
<div class="question">How do I "_________" on metamaps? <div class="switch"></div></div>
|
||||
<p class="answer off">Link to our cheatsheet stuff...and manual.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.FAQ').mCustomScrollbar();
|
||||
|
||||
$('.FAQ .question').click(function() {
|
||||
|
||||
$(this).find('.switch').toggleClass('minimizeAnswer');
|
||||
$(this).next().toggleClass('off');
|
||||
$('.FAQ').mCustomScrollbar('update');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -26,33 +26,36 @@
|
|||
<div class="inputGroup">
|
||||
<label for="map_permission">Permission: </label>
|
||||
|
||||
<div class="permIcon hoverForTip" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected"></div>
|
||||
<div class="permIcon" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected hoverForTip">
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<h4>COMMONS</h4>
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon"></div>
|
||||
<div class="permIcon" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon hoverForTip">
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<h4>PUBLIC</h4>
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon"></div>
|
||||
<h4>PRIVATE</h4>
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
<div class="permIcon" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon hoverForTip">
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
</div>
|
||||
</div>
|
||||
<h4>PRIVATE</h4>
|
||||
</div>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
|
||||
<p class="permText">*new topics and synapses take on the same permission as the map they are created on</p>
|
||||
|
||||
<div class="buttonWrapper">
|
||||
<button class="button" onclick="cancelMapCreate('fork_map'); return false;">Cancel</button>
|
||||
|
|
|
|||
|
|
@ -21,33 +21,36 @@
|
|||
<div class="inputGroup">
|
||||
<label for="map_permission">Permission: </label>
|
||||
|
||||
<div class="permIcon hoverForTip" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected"></div>
|
||||
<div class="permIcon" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected hoverForTip">
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<h4>COMMONS</h4>
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon"></div>
|
||||
<div class="permIcon" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon hoverForTip">
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<h4>PUBLIC</h4>
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon"></div>
|
||||
<h4>PRIVATE</h4>
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
<div class="permIcon" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon hoverForTip">
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
</div>
|
||||
</div>
|
||||
<h4>PRIVATE</h4>
|
||||
</div>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
|
||||
<p class="permText">*new topics and synapses take on the same permission as the map they are created on</p>
|
||||
|
||||
<div class="buttonWrapper">
|
||||
<button class="button" onclick="cancelMapCreate('new_map'); return false;">Cancel</button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue