Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

few more features

  • Loading branch information...
commit 9c29be9dac81b4e0860a512ca49bcef8d04c581b 1 parent 6192272
@maccman authored
View
3  .gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+build
+Stylo.app
View
12 README.md
@@ -1,3 +1,8 @@
+A Photoshop replacement. Inspired by Keynote.
+
+##TODO
+
+Phase 1:
* ✓ Move
* ✓ Resize
@@ -6,6 +11,8 @@
* Toolbar menu
* Property panel
+Phase 2:
+
* Snapping
* Pen tool
* Layers
@@ -14,7 +21,10 @@
* Z-index
* Keyboard shortcuts
-Keynote!!!
+Nice to have:
+
+* Versioning
+* Exporting HTML
##Rulers & Snap
View
2  Rakefile
@@ -1,5 +1,5 @@
namespace :macgap do
task :build do
- `macgap --name Stylo ./public`
+ `macgap build --name Stylo ./public`
end
end
View
BIN  assets/images/blacky.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/images/whitey.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  assets/javascripts/app/controllers/canvas.module.coffee
@@ -36,6 +36,4 @@ class Canvas extends Element
borderRadius: (val) ->
-
-
module.exports = Canvas
View
12 assets/javascripts/app/controllers/element.module.coffee
@@ -5,7 +5,7 @@ class Element extends Spine.Controller
position: 'absolute'
width: '100px'
height: '100px'
- background: 'red'
+ background: 'rgba(0, 0, 0, 0.5)'
left: '0'
top: '0'
minWidth: '1'
@@ -15,12 +15,14 @@ class Element extends Spine.Controller
'mousedown': 'select'
'dblclick': 'edit'
- constructor: ->
- super
+ constructor: (attrs = {}) ->
+ super()
@resizing = new Resizing(this)
@el.addClass('element')
- @set @defaults
@bind 'selected', @selected
+ @set @defaults
+ @set attrs
+ @log attrs
get: (key) ->
@[key]?() or @el.css(key)
@@ -43,7 +45,7 @@ class Element extends Spine.Controller
@el.transform(translate3d: '0,0,0')
select: (e) ->
- @el.trigger('select', this)
+ @el.trigger('select', [this, e.shiftKey])
selected: (bool) =>
@el.toggleClass('selected', bool)
View
9 assets/javascripts/app/controllers/header.module.coffee
@@ -0,0 +1,9 @@
+class Header extends Spine.Controller
+ tag: 'header'
+ className: 'header'
+
+ constructor: ->
+ super
+ throw 'stage required' unless @stage
+
+module.exports = Header
View
4 assets/javascripts/app/controllers/inspector.module.coffee
@@ -0,0 +1,4 @@
+class Inspector extends Spine.Controller
+ className: 'inspector'
+
+module.export = Inspector
View
10 assets/javascripts/app/controllers/selection.module.coffee
@@ -18,10 +18,9 @@ class Area extends Spine.Controller
@el.css(key)
resize: (left, top) ->
- dimensions = {
- width: left - @left,
+ dimensions =
+ width: left - @left
height: top - @top
- }
# Support negative areas
if dimensions.width < 0
@@ -44,7 +43,7 @@ class Selection extends Spine.Module
constructor: (@elements = []) ->
# Returns a property for an element selection.
- # Returns null if any of the elements have a different value.
+ # Returns null unless all of the elements have the same value.
get: (key) ->
result = (el.get(key) for el in @elements)
first = result.shift()
@@ -52,18 +51,21 @@ class Selection extends Spine.Module
return null
return first
+ # Sets a property on all elements
set: (key, value) ->
el.set(key, value) for el in @elements
isMultiple: ->
@elements.length > 1
+ # Select an element
add: (element) ->
return if element in @elements
@elements.push(element)
element.trigger('selected', true)
@trigger('change')
+ # Remove a selected element
remove: (element) ->
return if element not in @elements
element.trigger('selected', false)
View
53 assets/javascripts/app/controllers/stage.module.coffee
@@ -17,18 +17,17 @@ class Stage extends Spine.Controller
@selection = new Selection
@elements = []
- # Test data
- @add(new Rectangle)
- @rectangle2 = new Rectangle
+ # FIXME: Test data
+ @rectangle1 = new Rectangle(background: 'url(assets/whitey.png)', boxShadow: '0 1px 3px rgba(0,0,0,0.4)')
+ @rectangle2 = new Rectangle(left: '200px', top: '200px', background: 'url(assets/blacky.png)')
+
+ @add(@rectangle1)
@add(@rectangle2)
- @rectangle2.set(left: '200', top: '200', background: 'blue')
add: (element) =>
@elements.push(element)
@append(element)
- toDataURL: (type = 'image/png') ->
-
# Dragging elements
dragListen: (e) =>
@@ -36,10 +35,10 @@ class Stage extends Spine.Controller
e.stopPropagation()
@dragPosition = {left: e.pageX, top: e.pageY}
- $(document).mousemove(@drag)
- $(document).mouseup(@drop)
+ $(@el).mousemove(@drag)
+ $(@el).mouseup(@drop)
- # Snapping:
+ # TODO: Snapping:
# - Middle of x axis
# - Middle of y axis
# - Middle of element x axis
@@ -56,13 +55,17 @@ class Stage extends Spine.Controller
drop: (e) =>
@selection.set('fix')
- $(document).unbind('mousemove', @drag)
- $(document).unbind('mouseup', @drop)
+ $(@el).unbind('mousemove', @drag)
+ $(@el).unbind('mouseup', @drop)
# Selecting elements
- select: (e, element) =>
- @selection.clear() unless @selection.isMultiple()
+ select: (e, element, modifier) =>
+ # Clear selection unless multiple items are
+ # selected, or the shift key is pressed
+ if !@selection.isMultiple() and !modifier
+ @selection.clear()
+
@selection.add(element)
deselect: (e) =>
@@ -75,14 +78,25 @@ class Stage extends Spine.Controller
e.preventDefault()
e.stopPropagation()
- @$selectArea = new Selection.Area(e.clientX, e.clientY)
+ # Mouse events need to be offset
+ # by the height of the header
+ @offset = @el.offset()
+ @$selectArea = new Selection.Area(
+ e.clientX - @offset.left,
+ e.clientY - @offset.top
+ )
+
@append(@$selectArea)
- $(document).mousemove(@selectArea)
- $(document).mouseup(@selectAreaRemove)
+ $(@el).mousemove(@selectArea)
+ $(@el).mouseup(@selectAreaRemove)
selectArea: (e) =>
- @$selectArea.resize(e.clientX, e.clientY)
+ @$selectArea.resize(
+ e.clientX - @offset.left,
+ e.clientY - @offset.top
+ )
+
area = @$selectArea.area()
for element in @elements
@@ -93,8 +107,8 @@ class Stage extends Spine.Controller
selectAreaRemove: (e) =>
@$selectArea.remove()
- $(document).unbind('mousemove', @selectArea)
- $(document).unbind('mouseup', @selectAreaRemove)
+ $(@el).unbind('mousemove', @selectArea)
+ $(@el).unbind('mouseup', @selectAreaRemove)
# Resizing
@@ -104,5 +118,4 @@ class Stage extends Spine.Controller
resizeEnd: ->
@$('.thumb').show()
-
module.exports = Stage
View
7 assets/javascripts/app/index.module.coffee
@@ -1,10 +1,13 @@
-Stage = require('app/controllers/stage')
+Stage = require('./controllers/stage')
+Header = require('./controllers/header')
class App extends Spine.Controller
className: 'app'
constructor: ->
super
- @append(@stage = new Stage)
+ @stage = new Stage
+ @header = new Header(stage: @stage)
+ @append(@header, @stage)
module.exports = App
View
8 assets/stylesheets/app/header.css.styl
@@ -0,0 +1,8 @@
+@import 'mixins'
+
+#app .header {
+ height: 40px
+ line-height: 40px
+ vbg-gradient(#5F9FE6, #3A7AC1)
+ // vbg-gradient(#EAEAEA, #B1B1B1)
+}
View
8 assets/stylesheets/app/stage.css.styl
@@ -4,8 +4,10 @@
vbox()
box-flex(1)
- background: url('bg-grid.png')
+ // background: url('bg-grid.png')
+ background: #FFF
position: relative
+ overflow: auto
.element.selected {
// outline: 1px dotted rgba(0, 0, 0, 1)
@@ -66,8 +68,8 @@
.selectArea {
position: absolute
- border: 1px solid rgba(0, 0, 250, 0.15)
- background: rgba(0, 0, 250, 0.1)
+ border: 1px solid rgba(0, 0, 0, 0.2)
+ background: rgba(0, 0, 0, 0.1)
z-index: 1000
}
}
View
12 assets/stylesheets/application.css
@@ -1,12 +1,4 @@
/*
+= require theme
= require_tree ./app
-*/
-
-body {
- margin: 0;
- padding: 0;
-
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
-}
+*/
View
86 assets/stylesheets/theme.css.styl
@@ -0,0 +1,86 @@
+@import 'mixins'
+
+body, html {
+ height: 100%
+ width: 100%
+ margin: 0
+ padding: 0
+ overflow: hidden
+ -webkit-user-select: none
+}
+
+body {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+
+ text-rendering: optimizeLegibility
+ -webkit-font-smoothing: antialiased
+ color: #626262;
+ font-family: 'Helvetica Neue', Helvetica, Arial Geneva, sans-serif;
+ font-size: 12px;
+}
+
+// * {
+// -moz-box-sizing: border-box;
+// -webkit-box-sizing: border-box;
+// box-sizing: border-box;
+// }
+
+p {
+ margin: 0 0 10px 0
+ line-height: 1.5em
+}
+
+a {
+ color: #2D81C5
+ text-shadow: 0 1px 0 #FFF
+ text-decoration: none
+ cursor: pointer
+}
+
+::selection {
+ background: #E0EDF8
+ text-shadow: none
+}
+
+hr {
+ border: 1px solid lighten(#D1D1D1, 20%)
+ border-width: 1px 0 0 0
+ margin: 10px 0 20px 0
+}
+
+input[type=text], input[type=url], textarea {
+ padding: 3px
+ margin: 0
+ border: 1px solid rgba(0, 0, 0, 0.2)
+ inset-box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.1))
+}
+
+input[type=text], input[type=url], textarea, select {
+ &:focus {
+ outline: none
+ border-color: rgba(104, 189, 244, 0.8)
+
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(104, 189, 244, 0.6)
+ }
+}
+
+textarea {
+ padding: 5px
+ height: 80px
+}
+
+.right {
+ float: right
+}
+
+.left {
+ float: left
+}
+
+.hidden {
+ display: none
+}
View
101 public/assets/application.css
@@ -1,3 +1,86 @@
+body,
+html {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ -webkit-user-select: none;
+}
+body {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-box-align: stretch;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ color: #626262;
+ font-family: 'Helvetica Neue', Helvetica, Arial Geneva, sans-serif;
+ font-size: 12px;
+}
+p {
+ margin: 0 0 10px 0;
+ line-height: 1.5em;
+}
+a {
+ color: #2d81c5;
+ text-shadow: 0 1px 0 #fff;
+ text-decoration: none;
+ cursor: pointer;
+}
+::selection {
+ background: #e0edf8;
+ text-shadow: none;
+}
+hr {
+ border: 1px solid #dadada;
+ border-width: 1px 0 0 0;
+ margin: 10px 0 20px 0;
+}
+input[type=text],
+input[type=url],
+textarea {
+ padding: 3px;
+ margin: 0;
+ border: 1px solid rgba(0,0,0,0.20);
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
+}
+input[type=text]:focus,
+input[type=url]:focus,
+textarea:focus,
+select:focus {
+ outline: none;
+ border-color: rgba(104,189,244,0.80);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
+ -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 1px 5px 0 rgba(104,189,244,0.60);
+}
+textarea {
+ padding: 5px;
+ height: 80px;
+}
+.right {
+ float: right;
+}
+.left {
+ float: left;
+}
+.hidden {
+ display: none;
+}
+#app .header {
+ height: 40px;
+ line-height: 40px;
+ background: #5f9fe6;
+ background: -webkit-gradient(linear, left top, left bottom, from(#5f9fe6), to(#3a7ac1));
+ background: -moz-linear-gradient(top, #5f9fe6, #3a7ac1);
+ background: linear-gradient(top, #5f9fe6, #3a7ac1);
+}
#app {
display: -webkit-box;
-webkit-box-orient: vertical;
@@ -19,8 +102,9 @@
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
- background: url("bg-grid.png");
+ background: #fff;
position: relative;
+ overflow: auto;
}
#app .stage .resizing .thumb {
position: absolute;
@@ -68,20 +152,11 @@
}
#app .stage .selectArea {
position: absolute;
- border: 1px solid rgba(0,0,250,0.15);
- background: rgba(0,0,250,0.10);
+ border: 1px solid rgba(0,0,0,0.20);
+ background: rgba(0,0,0,0.10);
z-index: 1000;
}
/*
-*/
-
-
-body {
- margin: 0;
- padding: 0;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-box-align: stretch;
-}
+*/
View
119 public/assets/application.js
@@ -11157,7 +11157,7 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
position: 'absolute',
width: '100px',
height: '100px',
- background: 'red',
+ background: 'rgba(0, 0, 0, 0.5)',
left: '0',
top: '0',
minWidth: '1',
@@ -11169,12 +11169,16 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
'dblclick': 'edit'
};
- function Element() {
- this.selected = __bind(this.selected, this); Element.__super__.constructor.apply(this, arguments);
+ function Element(attrs) {
+ if (attrs == null) attrs = {};
+ this.selected = __bind(this.selected, this);
+ Element.__super__.constructor.call(this);
this.resizing = new Resizing(this);
this.el.addClass('element');
- this.set(this.defaults);
this.bind('selected', this.selected);
+ this.set(this.defaults);
+ this.set(attrs);
+ this.log(attrs);
}
Element.prototype.get = function(key) {
@@ -11215,7 +11219,7 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
};
Element.prototype.select = function(e) {
- return this.el.trigger('select', this);
+ return this.el.trigger('select', [this, e.shiftKey]);
};
Element.prototype.selected = function(bool) {
@@ -11349,6 +11353,53 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
module.exports = Rectangle;
}).call(this);
+;}});this.require.define({"app/controllers/header":function(exports, require, module){(function() {
+ var Header,
+ __hasProp = Object.prototype.hasOwnProperty,
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+ Header = (function(_super) {
+
+ __extends(Header, _super);
+
+ Header.prototype.tag = 'header';
+
+ Header.prototype.className = 'header';
+
+ function Header() {
+ Header.__super__.constructor.apply(this, arguments);
+ if (!this.stage) throw 'stage required';
+ }
+
+ return Header;
+
+ })(Spine.Controller);
+
+ module.exports = Header;
+
+}).call(this);
+;}});this.require.define({"app/controllers/inspector":function(exports, require, module){(function() {
+ var Inspector,
+ __hasProp = Object.prototype.hasOwnProperty,
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
+
+ Inspector = (function(_super) {
+
+ __extends(Inspector, _super);
+
+ function Inspector() {
+ Inspector.__super__.constructor.apply(this, arguments);
+ }
+
+ Inspector.prototype.className = 'inspector';
+
+ return Inspector;
+
+ })(Spine.Controller);
+
+ module["export"] = Inspector;
+
+}).call(this);
;}});this.require.define({"app/controllers/resizing":function(exports, require, module){(function() {
var Resizing, Thumb,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
@@ -11699,14 +11750,17 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
this.add = __bind(this.add, this); Stage.__super__.constructor.apply(this, arguments);
this.selection = new Selection;
this.elements = [];
- this.add(new Rectangle);
- this.rectangle2 = new Rectangle;
- this.add(this.rectangle2);
- this.rectangle2.set({
- left: '200',
- top: '200',
- background: 'blue'
+ this.rectangle1 = new Rectangle({
+ background: 'url(assets/whitey.png)',
+ boxShadow: '0 1px 3px rgba(0,0,0,0.4)'
});
+ this.rectangle2 = new Rectangle({
+ left: '200px',
+ top: '200px',
+ background: 'url(assets/blacky.png)'
+ });
+ this.add(this.rectangle1);
+ this.add(this.rectangle2);
}
Stage.prototype.add = function(element) {
@@ -11714,10 +11768,6 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
return this.append(element);
};
- Stage.prototype.toDataURL = function(type) {
- if (type == null) type = 'image/png';
- };
-
Stage.prototype.dragListen = function(e) {
e.preventDefault();
e.stopPropagation();
@@ -11725,8 +11775,8 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
left: e.pageX,
top: e.pageY
};
- $(document).mousemove(this.drag);
- return $(document).mouseup(this.drop);
+ $(this.el).mousemove(this.drag);
+ return $(this.el).mouseup(this.drop);
};
Stage.prototype.drag = function(e) {
@@ -11740,12 +11790,12 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
Stage.prototype.drop = function(e) {
this.selection.set('fix');
- $(document).unbind('mousemove', this.drag);
- return $(document).unbind('mouseup', this.drop);
+ $(this.el).unbind('mousemove', this.drag);
+ return $(this.el).unbind('mouseup', this.drop);
};
- Stage.prototype.select = function(e, element) {
- if (!this.selection.isMultiple()) this.selection.clear();
+ Stage.prototype.select = function(e, element, modifier) {
+ if (!this.selection.isMultiple() && !modifier) this.selection.clear();
return this.selection.add(element);
};
@@ -11756,15 +11806,16 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
Stage.prototype.selectAreaListen = function(e) {
e.preventDefault();
e.stopPropagation();
- this.$selectArea = new Selection.Area(e.clientX, e.clientY);
+ this.offset = this.el.offset();
+ this.$selectArea = new Selection.Area(e.clientX - this.offset.left, e.clientY - this.offset.top);
this.append(this.$selectArea);
- $(document).mousemove(this.selectArea);
- return $(document).mouseup(this.selectAreaRemove);
+ $(this.el).mousemove(this.selectArea);
+ return $(this.el).mouseup(this.selectAreaRemove);
};
Stage.prototype.selectArea = function(e) {
var area, element, _i, _len, _ref, _results;
- this.$selectArea.resize(e.clientX, e.clientY);
+ this.$selectArea.resize(e.clientX - this.offset.left, e.clientY - this.offset.top);
area = this.$selectArea.area();
_ref = this.elements;
_results = [];
@@ -11781,8 +11832,8 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
Stage.prototype.selectAreaRemove = function(e) {
this.$selectArea.remove();
- $(document).unbind('mousemove', this.selectArea);
- return $(document).unbind('mouseup', this.selectAreaRemove);
+ $(this.el).unbind('mousemove', this.selectArea);
+ return $(this.el).unbind('mouseup', this.selectAreaRemove);
};
Stage.prototype.resizeStart = function() {
@@ -11801,11 +11852,13 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
}).call(this);
;}});this.require.define({"app/index":function(exports, require, module){(function() {
- var App, Stage,
+ var App, Header, Stage,
__hasProp = Object.prototype.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
- Stage = require('app/controllers/stage');
+ Stage = require('./controllers/stage');
+
+ Header = require('./controllers/header');
App = (function(_super) {
@@ -11815,7 +11868,11 @@ this.require.define({"app/controllers/canvas":function(exports, require, module)
function App() {
App.__super__.constructor.apply(this, arguments);
- this.append(this.stage = new Stage);
+ this.stage = new Stage;
+ this.header = new Header({
+ stage: this.stage
+ });
+ this.append(this.header, this.stage);
}
return App;
View
BIN  public/assets/blacky.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  public/assets/whitey.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
23 public/index.html
@@ -1,9 +1,16 @@
-<link rel="stylesheet" href="assets/application.css" type="text/css">
-<script src="assets/application.js"></script>
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Stylo</title>
+ <link rel="stylesheet" href="assets/application.css" type="text/css">
+ <script src="assets/application.js"></script>
+</head>
+<body>
+ <div id="app"></div>
-<div id="app"></div>
-
-<script type="text/javascript" charset="utf-8">
- var App = require('app');
- new App({el: $('#app')});
-</script>
+ <script type="text/javascript" charset="utf-8">
+ var App = require('app');
+ new App({el: $('#app')});
+ </script>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.